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TypeScript 入 门 教 程 


从 JavaScript 程序 员 的 角度 总 结 思考 ， 循 序 渐进 的 理解 TypeScript。 


关于 本 书 


e。 在 线 阅 读 (部 署 在 GitBook 上 ， 可 能 需要 翻 墙 ) 
。 在 线 阅 读 (GitHub 版 ) 

e GitHub 地 址 

e 作者 : xcatliu 

e 官方 群 : 加 入 QQ 群 767142358 


本 书 是 作者 在 学 习 TypeScript 后 整理 的 学 习 笔 记 。 


随 着 对 TypeScript 理解 的 加 深 和 TypeScript 社区 的 发 展 ， 本 书 也 会 做 出 相应 的 更 
新 ， 欢 迎 大 家 Star 收藏 。 

@ 发 现 文章 内 容 有 问题 ， 可 以 直接 在 页 面 下 方 评论 

e@ 对 项 目的 建议 ， 可 以 提交 issue 向 作者 反馈 

@ 欢迎 直接 提交 pull-request 参与 贡献 
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为 什么 要 写本 书 

TypeScript 虽然 有 官方 手册 及 其 非 官 方 中 文 版 ， 但 是 它 每 一 章 都 希望 能 详尽 的 描述 
一 个 概念 ， 导 致 前 面 的 章节 就 会 包含 很 多 后 面 才 会 学 习 到 的 内 容 ， 而 有 些 本 该 一 开 
始 就 了 解 的 基础 知识 却 在 后 面 才 会 涉及 。 如 果 是 初学 者 ， 可 能 需要 阅读 多 次 才能 理 
解 。 所 以 它 更 适合 用 来 查阅 ， 而 不 是 学 习 。 

与 官方 手册 不 同 ， 本 书 着 重 于 从 JavaScript 程序 员 的 角度 总 结 思考 ， 循 序 渐进 的 理 
解 TypeScript， 和 希望 能 给 大 家 一 些 帮 助 和 局 示 。 

由 于 一 些 知识 点 与 官方 手册 重合 度 很 高 ， 本 书 会 在 相应 章节 推荐 直接 阅读 中 文 手 
i 


关于 TypeScript 


TypeScript 是 JavaScript 的 一 个 超 集 ， 主 要 提供 了 类 型 系统 和 对 ES6 的 支持 ， 它 
由 Microsoft 开发 ， 代 码 开 源 于 GitHub 上 。 


它 的 第 一 个 版 本 发 布 于 2012 年 10 月 ， 经历 了 多 次 更 新 后 ， 现 在 已 成 为 前 端 社区 
广泛 


中 不 可 忽视 的 力量 ， 不 仅 在 Microsoft 内 部 得 到 广泛 运用 ， 而 且 Google 的 
Angular2 也 使 用 了 TypeScript 作为 开发 语言 。 


适合 人 群 


本 书 适 合 以 下 人 群 


。 就 悉 JavaScript， 至 少 阅 读 过 一 遍 《JavaScript 高 级 程序 设计 》 
。 了解 ES6， 推 荐 阅读 ECMAScript 6 入 门 

e。 了 解 Node.js， 会 用 npm 安装 及 使 用 一 些 工具 

。 想 了 解 TypeScript 或 者 想 对 TypeScript 有 更 深 的 理解 


本 书 不 适合 以 下 人 和 群 


e@ 没有 系统 学 习 过 JavaScript 
e。 已 经 能 够 很 熟练 的 运用 TypeScript 


评价 


《TypeScript 入 门 教程 》 全 面 介绍 了 TS 强大 的 类 型 系统 ， 完 整 而 简洁 ， 示 例 
丰富 ， 比 官方 文档 更 易 读 ， 非 常 适合 作为 初学 者 学 习 TS 的 第 一 本 书 。 


一 ” 阮 一 峰 


o 什么 是 TypeScript 

o 安装 TypeScript 

o Hello TypesScript 
@ 基础 

o 原始 数据 类 型 


o 任意 值 

o 类 型 推论 
o 联合 类 型 
o 对 人 象 的 类 型 
o 数组 的 类 型 
o 子 数 的 类 型 
o 类 型 断言 
o 声明 文件 
o 内 置 对 办 


接口 





o 类 型 别名 


o 声明 合并 

o 扩展 阅读 
e@ 工程 

o 代码 检查 
。 感谢 


版 权 许可 


本 书 采 用 「 保 持 署 名 一 非 商 用 」 创意 共享 4.0 许可 证 。 
只 要 保持 原作 者 署名 和 非 商 用 ， 您 可 以 自由 地 阅读 、 分 享 、 修 改 本 书 。 


详细 的 法 律 条 文 请 参见 创意 共享 网 站 。 
“2 py xd 小 、 
相关 资料 
e TypeScript 官网 


e Handbook (中 文 版 ) 
。ECMAScript 6 入 门 
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本 部 分 介绍 了 在 学 习 TypeScript 之 前 需要 了 解 的 知识 ， 具 体内 容 包括 : 


e 什么 是 TypeScript 
。 安装 TypeScript 
e Hello TypeScript 


: 什么 是 TypeScript 


什么 是 TypeScript 


首先 ， 我 对 TypeScript 的 理解 如 下 


TypeScript 是 JavaScript 的 一 个 超 集 ， 主 要 提供 了 类 型 系统 和 对 ES6 的 支持 ， 它 
由 Microsoft 开发 ， 代 码 开 源 于 GitHub 上 。 


其 次 引用 官网 的 定义 : 


Typescript is a typed superset of JavaScript that compiles to plain JavaScript. 
Any browser. Any host. Any OS. Open source. 


翻译 成 中 文 即 是 : 


TypeScript 是 JavaScript 的 类 型 的 超 集 ， 它 可 以 编译 成 纯 JavaScript。 编 译 出 
来 的 JavaScript 可 以 运行 在 任何 浏览 器 上 。TypeScript 编译 工具 可 以 运行 在 任 
何 服务 器 和 任何 系统 上 。TypeScript 是 开源 的 。 


为 什么 选择 TypeScript 


TypeScript 官网 列举 了 一 些 优势 ， 不 过 我 更 愿意 自己 总 结 一 下 : 


TypeScript 增加 了 代码 的 可 读 性 和 可 维护 性 


e@ 类 型 系统 实际 上 是 最 好 的 文档 ， 大 部 分 的 苑 数 看 看 类 型 的 定义 就 可 以 知道 如 何 
使 用 了 

e。 可 以 在 编译 阶段 就 发 现 大 部 分 错误 ， 这 总 比 在 运行 时 候 出 错 好 

。 增强 了 编辑 器 和 |DE 的 功能 ， 包 括 代码 补 全 、 接 口 提示 、 跳 转 到 定义 、 重 构 等 


TypeScript 非常 包容 


e。 TypeScript 是 JavaScript 的 超 集 ， ,js 文件 可 以 直接 重 命名 为 ,ts 即 可 
e@ 即使 不 显 式 的 定义 类 型 ， 也 能 够 自动 做 出 类 型 推论 

e@ 可 以 定义 从 简单 到 复杂 的 一 切 类 型 

e。 即使 TypeScript 编译 报错 ， 也 可 以 生成 JavaScript 文件 

@ 兼容 第 三 方 库 ， 即 使 第 三 方 库 不 是 用 TypeScript 写 的 ， 也 可 以 编写 单独 的 类 型 


文件 供 TypeScript 读 取 


TypeScript 拥有 活跃 的 社区 


e。 大 部 分 第 三 方 库 都 有 提供 给 TypeScript 的 类 型 定义 文件 

e Google 开发 的 Angular2 就 是 使 用 TypeScript 编写 的 

e。 ES6 的 一 部 分 特性 是 借鉴 的 TypeScript 的 (这 条 需要 来 源 ) 
e。 TypeScript 拥抱 了 ES6 规范 ， 也 支持 部 分 ES7 草案 的 规范 


TypeScript 的 缺点 
任何 事物 都 是 有 两 面 性 的 ， 我 认为 TypeScript 的 商 端 在 于 : 


e@ 有 一 定 的 学 习 成 本 ， 需 要 理解 接口 (Interfaces) 、 泛 型 (Generics) 、 类 
(Classes) 、 枚 举 类 型 (Enums) 等 前 端 工 程 师 可 能 不 是 很 熟悉 的 东西 。 而 
且 它 的 中 文 资料 也 不 多 
。 短期 可 能 会 增加 一 些 开发 成 本 ， 毕 竞 要 多 写 一 些 类 型 的 定义 ， 不 过 对 于 一 个 需 
要 长 期 维护 的 项 目 ，TypeScript 能 够 减少 其 维护 成 本 (这 条 需要 来 源 ) 
e。 集成 到 构建 流程 需要 一 些 工 作 量 
e。 可 能 和 一 些 库 结合 的 不 是 很 完美 (这 条 需要 举例 ) 


大 家 可 以 根据 自己 团队 和 项 目的 情况 判断 是 否 需 要 使 用 TypeScript 。 


: 安装 TypeScript 


安装 TypeScript 
TypeScript 的 命令 行 工 具 安装 方法 如 下 : 


npm install -g typescript 


以 上 命令 会 在 全 局 环境 下 安装 tsc 命令 ， 安 装 完成 之 后 ， 我 们 就 可 以 在 任何 地 方 


执行 tsc 命令 了 。 


编译 一 个 TypeScript 文件 很 简单 : 


tsc hello.ts 
我 们 约定 使 用 TypeScript 编写 的 文件 以 ,ts 为 后 级 。 


编辑 弘 


TypeScript 最 大 的 优势 之 一 便 是 增强 了 编辑 器 和 |DE 的 功能 ， 包 括 代码 补 全 、 接 口 


提示 、 跳 转 到 定义 、 重 构 等 。 


主流 的 编辑 器 都 支持 TypeScript， 这 里 我 推荐 使 用 Visual Studio Code。 


它 是 一 款 开源 ， 跨 终端 的 轻 量 级 编辑 器 ， 内 置 了 TypeScript 支持 。 


另外 它 本 身 也 是 用 TypeScript 编写 的 。 
下 载 安装 : https://code.visualstudio.com/ 
获取 其 他 编辑 器 或 IDE 对 TypeScript 的 支持 : 


e Sublime Text 

e Atom 

e WebStorm 

e Vim 

e Emacs 

e Eclipse 

e Visual Studio 2015 


安装 TypeScript 


e Visual Studio 2013 


。 上 一 章 : 什么 是 TypeScript 
。 下 一 章 : Hello TypeScript 
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Hello TypeScript 


我 们 从 一 个 简单 的 例子 开始 。 


将 以 下 代码 复制 到 hello.ts 中 : 


function sayHello(person: string) { 
return 'Hello, ' + person; 


etmusermn = Tome 
console.log(sayHello(user)); 


tsc hello.ts 


这 时 候 会 生成 一 个 编译 好 的 文件 hello.js 


function sayHello(person) { 
return 'Hello, ' + person; 


} 


var user = 'Tom',; 
console.log(sayHello(user)); 


TypeScript 中 ， 使 用 : 指定 变量 的 类 型 ，; 的 前 后 有 没有 空格 都 可 以 。 


上 述 例子 中 ， 我 们 用 : 指定 person 参数 类 型 为 string 。 但 是 编译 为 js 之 
后 ， 并 没有 什么 检查 的 代码 被 插入 进来 。 


TypeScript 只 会 进行 静态 检查 ， 如 果 发 现 有 错误 ， 编 译 的 时 候 就 会 报错 。 


let 是 ES6 中 的 关键 字 ， 和 var 类 似 ， 用 于 定义 一 个 局 部 变量 ， 可 以 参 


阅 let 和 const 命令 。 


下 面 党 试 把 这 段 代码 编译 一 下 : 


function sayHello(person: String) { 
return 'Hello, ' + person; 


let user = [0, 1, 2]; 
console.log(sayHello(user)); 


编辑 器 中 会 提示 错误 ， 编 译 的 时 候 也 会 出 错 : 


index.ts(6,22): error TS2345: Argument of type :number[]” is not 
assignable to parameter of type 'string'. 


但 是 还 是 生成 了 js 文件 : 


function sayHello(person) { 
return 'Hello, ' + person; 


} 
va usere = To m2 
console.log(sayHello(user)); 


TypeScript 编译 的 时 候 即 使 报错 了 ， 还 是 会 生成 编译 结果 ， 我 们 仍然 可 以 使 用 这 个 
编译 之 后 的 文件 。 


如 果 要 在 报错 的 时 候 终 止 js 文件 的 生成 ， 可 以 在 tsconfig.json 中 配置 
noEmitOnError 即 可 。 关 于 tsconfig.json ， 请 参阅 官方 手册 (中 文 版 ) 。 


装 TypeScript 


基础 


本 部 分 介绍 了 TypeScript 中 的 常用 类 型 和 一 些 基 本 概念 ， 旨 在 让 大 家 对 TypeScript 
有 个 初步 的 理解 。 具 体内 容 包 括 : 


e@ 原始 数据 类 型 
e@ 任意 值 

e@ 类 型 推论 
@ 联合 类 型 
e。 对 象 的 类 型 
e@ 数组 的 类 型 
e@ 函数 的 类 型 
e@ 类 型 断言 
e 声明 文件 
e@ 内 置 对 象 


接口 





e 上 一 章 : Hello TypeScript 
e@ 下 一 章 : 原始 数据 类 型 
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原始 数据 类 型 


JavaScript 的 类 型 分 为 两 种 : 原始 数据 类 型 (Primitive data types) 和 对 象 类 型 
(Objecttypes) 。 


原始 数据 类 型 包括 : 布尔 值 、 数 值 、 字 符 串 、 null 、 undefined 以 及 ES6 中 
的 新 类 型 Symbol 。 


本 节 主 要 介绍 前 五 种 原始 数据 类 型 在 TypeScript 中 的 应 用 。 
布尔 值 


布尔 值 是 最 基础 的 数据 类 型 ， 在 TypeScript 中 ， 使 用 boolean 定义 布尔 值 类 


let isDone: boolean = false; 


// 编译 通过 
// 后 面 约 定 ， 未 强调 编译 错误 的 代码 片段 ， 默 认为 编译 通过 


注意 ， 使 用 构造 函数 Boolean 创造 的 对 象 不 是 布尔 值 : 
let createdByNewBoolean: boolean = new Boolean(1),; 


// index.ts(1,5): error TS2322: Type 'Boolean' is not assignable 
to type 'boolean'. 
// 后 面 约 定 它 ， 注 释 中 标 出 了 编译 报错 普 的 代码 片段 ， 表示 编译 未 通过 


事实 上 new Boolean() 返回 的 是 一 个 Boolean 对 象 : 


let createdByNewBoolean: Boolean = new Boolean(1); 


直接 调用 Boolean 也 可 以 返回 一 个 boolean 类 型 : 


let createdByBoolean: boolean = Boolean(1); 


在 TypeScript 中 ， boolean 是 JavaScript 中 的 基本 类 型 ， 而 Boolean 是 
JavaScript 中 的 构造 函数 。 其 他 基本 类 型 〈 除 了 _ nul1 和 undefined ) 一 样 ， 
不 再 袭 述 。 


数值 


使 用 number 定义 数值 类 型 : 


let decLiteral: number 6; 


GOxf69gdcd 


let hexLiteral: number 
// ES6 中 的 二 进 制 表 示 法 
let binaryLiteral: number = 0b1010; 

// ES6 中 的 八进制 表示 法 

let octalLiteral: number = 00744; 

let notANumber: number = NaN; 

let infinityNumber: number = Infinity; 


编译 结果 : 


Var decLiteral 6; 

var hexLiteral = 0xf00d ; 
// ES6 中 的 二 进 制 表示 法 
var binaryLiteral = 10; 
// ES6 中 的 八进制 表示 法 
Var octallLiteral = 484; 
Var notANumber = NaN; 


var infinityNumber = Infinity， 


其 中 60b1010 和 00744 是 ES6 中 的 二 进 制 和 八进制 表示 法 ， 它 们 会 被 编译 为 
十 进 制 数字 。 


字符 串 


使 用 string 定义 字符 串 类 型 : 


let myName: string = "Tom'， 
let myAge: number = 25， 


// 模板 字符 串 


let sentence: string = ‘Hello, my name is ${myName}. 
I'l1l be ${myAge + 1} years old next month. ; 


编译 结果 : 
var myName = 'Tom'; 
var myAge = 25; 
// 模板 字符 囊 


var sentence = "Hello, my name is " + myName + ".\NI'1] be " + ( 
myAge + 1) + " years old next month."; 


其 中 、 用 来 定义 ES6 中 的 模板 字符 串 ， $f{fexpr} 用 来 在 模板 字符 串 中 府 入 表 


空 值 


JavaScript 没有 空 值 (Void) 的 概念 ， 在 TypeScirpt 中 ， 可 以 用 void 表示 没有 
任何 返回 值 的 函数 : 


function alertName(): void { 
alert('My name is Tom'); 


声明 一 个 void 类 型 的 变量 没有 什么 用 ， 因 为 你 只 能 将 它 赋值 为 undefined 和 
null 


let unusable: void = undefined; 


Null 和 Undefined 


在 TypeScript 中 ， 可 以 使 用 null 和 
型 : 


let u: undefined = undefined; 
let n: null = null; 
undefined 类 型 的 变量 只 能 被 赋值 为 


赋值 为 null 。 


与 void 的 区 别 是 ， undefined 和 
undefined 类 型 的 变量 ， 可 以 赋值 给 


/ 这 样 不 会 报错 


let num: number = undefined; 


/ 这 样 也 不 会 报错 
Jet U: 
lJet num: 


undefined; 
number = u; 


而 void 类 型 的 变量 不 能 赋值 给 


Jet U: 
Jet num: 


void; 
number = U， 
A TINOE XN EES!(2R50 


type number 


参考 


e Basic Types (中 文 版 ) 
Primitive data types 
Eve Symbol 
ES6 中 的 二 进 制 和 八 进 
ES6 中 的 村 et 囊 


制 表示 法 


error TS2322: 


undefined 来 定义 这 两 个 原始 数据 类 


undefined ， null 类 型 的 变量 只 能 被 


null 是 所 有 类 型 的 子 类 型 。 也 就 是 说 
number 类 型 的 变量 : 


number 类 型 的 变量 : 


Type 'void' is not assignable to 


原始 数据 类 型 


e@ 上 一 章 : 基础 
e 下 一 章 : 任意 值 
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任意 值 


任意 值 (Any) 用 来 表示 允许 赋值 为 任意 类 型 。 


什么 是 任意 值 类 型 
如 果 是 一 个 普通 类 型 ， 在 赋值 过 程 中 改变 类 型 是 不 被 多 许 的 : 


let myFavoriteNumber: string = 'seven'，; 
myFavoriteNumber = 7; 


// index.ts(2,1): error TS2322: Type 'number' is not assignable 
tomevyieq sermuno 


但 如 果 是 any 类 型 ， 则 允许 被 赋值 为 任意 类 型 。 


let myFavoriteNumber: any = 'seven'; 
myFavoriteNumber = 7; 


壬 意 值 的 属性 和 方法 
在 任意 值 上 访问 任何 属性 都 是 允许 的 : 


let anyThing: any = 'hello'; 
console.log(anyThing.myName); 
console.log(anyThing.myName.firstName); 


也 允许 调用 任何 方法 : 


let anyThing: any = 'Tom'; 
anyThing.setName('Jerry'); 
anyThing.setName('Jerry').sayHello(); 
anyThing.myName.setFirstName('Cat'); 


可 以 认为 ， 声 明 一 个 变量 为 任意 值 之 后 ， 对 它 的 任何 操作 ， 返 回 的 内 容 的 类 型 都 是 
任意 值 。 


士 米 下 -号 - 
未 声明 类 型 的 变量 
变量 如 果 在 声明 的 时 候 ， 未 指定 其 类 型 ， 那 么 它 会 被 识别 为 任意 值 类 型 : 


let something; 
something = 'seven',; 
7 


something 


something.setName('Tom’'); 


等 价 于 


let something: any; 
something = 'seven'; 
7 


Something 


Something,SsetName( Tom' )， 


e Basic Types#Any (中 文 版 ) 


类 型 推论 


如 果 没 有 明确 的 指定 类 型 ， 那 么 TypeScript 会 依照 类 型 推论 (Type Inference ) 的 
规则 推断 出 一 个 类 型 。 


什么 是 类 型 推论 
以 下 代码 虽然 没有 指定 类 型 ， 但 是 会 在 编译 的 时 候 报错 : 


let myFavoriteNumber = 'seven'，; 
myFavoriteNumber = 7; 


// index.ts(2,1): error TS2322: Type 'number' is not assignable 
oneyen seminoge 


事实 上 ， 它 等 价 于 : 


let myFavoriteNumber: string = 'seven'，; 
myFavoriteNumber = 7; 


// index.ts(2,1): error TS2322: Type 'number' is not assignable 
to type 'string'. 


TypeScript 会 在 没有 明确 的 指定 类 型 的 时 候 推 测 出 一 个 类 型 ， 这 就 是 类 型 推论 。 
如 果 定 义 的 时 候 没 有 赋值 ， 不管 之 后 有 没有 赋值 ， 都 会 被 推断 成 any 类 型 而 完全 
不 被 类 型 检查 : 


let myFavoriteNumber 
myFavoriteNumber = 'seven'，; 
myFavoriteNumber = 7; 


I 推论 


。Type Inference (中 文 版 ) 
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联合 类 型 


联合 类 型 (Union Types) 表示 取 值 可 以 为 多 种 类 型 中 的 一 种 。 
简单 的 例子 


let myFavoriteNumber: string | number; 
myFavoriteNumber = 'seven'，; 
7; 


myFavoriteNumber 


Jet myFavoriteNumber: string | number; 
myFavoriteNumber = true; 


// index.ts(2,1): error TS2322: Type 'boolean' is not assignable 
to type 'string | number'. 
7 Type 'boolean' is not assignable to type number ' ， 


说 


联合 类 型 使 用 | 分 隔 每 个 类 型 。 


这 里 的 let myFavoriteNumber: string | number 的 含义 是 ， 允 许 
myFavoriteNumber 的 类 型 是 string 或 者 number ， 但 是 不 能 是 其 他 类 型 。 


访问 联合 类 型 的 属性 或 方法 


当 TypeScript 不 确定 一 个 联合 类 型 的 变量 到 底 是 哪个 类 型 的 时 候 ， 我 们 只 能 访问 此 
联合 类 型 的 所 有 类 型 里 共有 的 属性 或 方法 : 


function getLength(something: string | number): number { 
return something.1length; 


// index.ts(2,22): error TS2339: Property 'length' does not exis 
t on type 'string | number'. 
VB Property 'length' does not exist on type 'number'. 


上 例 中 ， length 不 是 string 和 number 的 共有 属性 ， 所 以 会 报错 。 


访问 string 和 number 的 共有 属性 是 没 问题 的 : 


functaonuigetstraing(sometninog string | number) string 
return something.toString(); 


联合 类 型 的 变量 在 被 赋值 的 时 候 ， 会 根据 类 型 推论 的 规则 推断 出 一 个 类 型 : 


let myFavoriteNumber: String | number 
myFavoriteNumber = 'seven'; 
console.log(myFavoriteNumber.length); // 5 
myFavoriteNumber = 7; 
console.log(myFavoriteNumber.length); // 编译 时 报错 


// index.ts(5,30): error TS2339: Property 'length' does not exis 
t on type 'number'. 


上 例 中 ， 第 二 行 的 myFavoriteNumber 被 推断 成 了 string ， 访 问 它 的 
length 属性 不 会 报错 。 

而 第 四 行 的 myFavoriteNumber 被 推断 成 了 number ， 访 问 它 的 length 属 
性 时 就 报错 了 。 


。Advanced Types # Union Types (中 文 版 ) 


e@ 上 一 章 : 
e@ 下 一 章 : 


类 型 推论 
对 象 的 类 型 一 接口 
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对 象 的 类 型 一 接口 


在 TypeScript 中 ， 我 们 使 用 接口 (Interfaces) 来 定义 对 象 的 类 型 。 


什么 是 接口 


在 面向 对 象 语言 中 ， 接 口 (Interfaces) 是 一 个 很 重要 的 概念 ， 它 是 对 行为 的 抽象 ， 
而 具体 如 何 行动 需要 由 类 (classes) 去 实现 (implements) 。 


TypeScript 中 的 接口 是 一 个 非常 灵活 的 概念 ， 除 了 可 用 于 对 类 的 一 部 分 行为 进行 抽 
象 以 外 ， 也 常用 于 对 「 对 象 的 形状 (Shape) 」 进 行 描述 。 


简单 的 例子 


interface Person { 
name: string; 
age: number,; 


let tom: Person = { 
name: 'Tom', 
age: 25 

}; 


上 面 的 例子 中 ， 我 们 定义 了 一 个 接口 Person ， 接 着 定义 了 一 个 变量 tom ， 它 
的 类 型 是 person 。 这 样 ， 我 们 就 约束 了 tom 的 形状 必须 和 接口 Person 一 
致 。 


接口 一 般 首 字母 大 写 。 有 的 编程 语言 中 会 建议 接口 的 名 称 加 上 工 前 组 。 


定义 的 变量 比 接口 少 了 一 些 属性 是 不 允许 的 : 


p 


二 名 2 米 4 立 
对 象 的 类 型 接口 





interface Person { 
name: string; 
age: number; 


Jet tom: Person = { 
name: 'Tom' 


}ee 


// index.ts(6,5): error TS2322: Type '{ name: string; }' is not 
assignable to type 'Person'. 
WN Property 'age' is missing in type '{ name: string; }'. 


多 一 些 属性 也 是 不 允许 的 : 


Interface Person { 
name: string; 
age: number; 


let tom: Person = { 
name: 'Tom', 
age: 25, 
gender: 'male' 


了 


/Tingexwts(9ns5yenrorilsS2322TYDeananeswnd age numbe 
r; gender: string; }' is not assignable to type 'Person'. 

ZY Object literal may only specify known properties, and 'gend 
er' does not exist in type 'Person'. 


可 见 ， 赋 值 的 时 候 ， 变 量 的 形状 必须 和 接口 的 形状 保持 一 致 。 


可 选 属性 


有 时 我 们 希望 不 要 完全 匹配 一 个 形状 ， 那 么 可 以 用 可 选 属性 : 
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interface Person { 
name: string; 
age?: number ; 


let tom: Person = { 
name: 'Tom' 


Jee 


interface Person { 
name: string; 
age?: number ; 


let tom: Person = { 
name: "Tom'， 
age: 25 

}; 


可 选 属性 的 含义 是 该 属性 可 以 不 存在 。 


这 时 仍然 不 允许 添加 未 定义 的 属性 : 


interface Person { 
name: string; 
age?: number,; 


let tom: Person = { 
name: "Tom'， 
age: 25, 
gender: 'male' 


je 


// examples/playground/index.ts(9,5): error TS2322: Type '{ name 
: String; age: number; gender: string; }' is not assignable to t 
ype 'Person'. 

ZY Object literal may only specify known properties, and 'gend 
er' does not exist in type 'Person'. 


任意 属性 
有 时 候 我 们 希望 一 个 接口 允许 有 任意 的 属性 ， 可 以 使 用 如 下 方式 : 


interface Person { 
name: string; 
age?: number,; 
[propName: string]: any; 


let tom: Person = { 
name: "Tom'， 
gender: 'male' 


了 


使 用 [propName: string] 定义 了 任意 属性 取 string 类 型 的 值 。 


需要 注意 的 是 ， 一 旦 定义 了 任意 属性 ， 那 么 确定 属性 和 可 选 属性 都 必须 是 它 的 子 属 
性 : 


Interface Person { 
name: string; 
age?: number ， 
[propName: string]: string; 


let tom: Person = { 
name: 'Tom', 
age: 25, 
gender: 'male' 


eB 


// index.ts(3,5): error TS2411: Property 'age' of type :number， 
is not assignable to String index type 'string'. 
andexnes(CS5h)ERenomahs2322TYDen lemme strangnlnu 
mber; name: string; age: number; gender: string; }' is not assig 
nable to type 'Person'. 

7 Index signatures are incompatible. 

YY Type 'string | number' is not assignable to type 'string'. 


/HY Type 'number' is not assignable to type 'string'. 
| 
上 例 中 ， 任 意 属性 的 值 允 许 是 string ， 但 是 可 选 属性 age 的 值 却 是 
number ， number 不 是 string 的 子 属 性 ， 所 以 报错 了 。 


另外 ， 在 报错 信息 中 可 以 看 出 ， 此 时 { name: 'Tom'，age: 25, gender: 
'male' } 的 类 型 被 推断 成 了 { [x: string]: string | number; name: 
string; age: number; gender: string; } ， 这 是 联合 类 型 和 接口 的 结合 。 
器 


/人 AN 卖 屋 性 


有 时 候 我 们 希望 对 象 中 的 一 些 字段 只 能 在 创建 的 时 候 被 赋值 ， 那么 可 以 用 
readonly 定义 只 读 属 性 : 


interface Person { 
readonly id: number; 
name: string; 
age?: number; 
[propName: string]: any; 


let tom: Person = { 
id: 89757, 
name: "Tom'， 
gender: 'male' 


}; 
tom.id = 9527; 


// index.ts(14,5): error TS2540: Cannot assign to 'id' because i 
t is a constant or a read-only property. 


上 例 中 ， 使 用 readonly 定义 的 属性 id 初始 化 后 ， 又 被 赋值 了 ， 所 以 报错 
了 Lo) 


注意 ， 只 读 的 约束 存在 于 第 一 次 给 对 彰 赋 值 的 时 候 ， 而 不 是 第 一 次 给 只 读 属 性 赋值 
的 时 候 : 


p 


对 象 的 类 型 授 口 





interface Person { 
readonly id: number; 
name: string; 
age?: number; 
[propName: string]: any; 


let tom: Person = { 
name: "Tom'， 
gender: 'male' 


ys 


tom.id = 89757; 


// index.ts(8,5): error TS2322: Type '{ name: string; gender: st 
ring; }' is not assignable to type 'Person'. 

/YY Property 'id' is missing in type '{ name: string; gender: s 
‘erraimels de 

// index.ts(13,5): error TS2540: Cannot assign to 'id' because i 
t is a constant or a read-only property. 


上 例 中 ， 报 错 信息 有 两 处 ， 第 一 处 是 在 对 tom 进行 赋值 的 时 候 ， 没 有 给 id 赋 


值 。 


第 二 处 是 在 给 tom.id 赋值 的 时 候 ， 由 于 它 是 只 读 属 性 ， 所 以 报错 了 。 


e Interfaces (中 文 版 ) 
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数组 的 类 型 


在 TypeScript 中 ， 数 组 类 型 有 多 种 定义 方式 ， 比 较 灵 活 。 


[类 型 + 方 括号 」 表示 法 
最 简单 的 方法 是 使 用 「 类 型 + 方 括号 」 来 表示 数组 : 


let fibonacci: number[] = [1i, 1, 2, 3, 5]; 


数组 的 项 中 不 允许 出 现 其 他 的 类 型 : 
let fibonacci: number[] = [1i, '1', 2, 3, 5]; 


index tes(Ies) errorTs2322 0 Tye (mmoberal serimg) a samo 
t assignable to type 'number[]'. 

WN Type 'number | string' is not assignable to type 'number'. 
7 Type 'string' is not assignable to type number ' ， 


上 例 中 ， [1，!1'，2，3，5] 的 类 型 被 推断 为 (number | string)[] ， 这 是 
联合 类 型 和 数组 的 结合 。 


数组 的 一 些 方法 的 参数 也 会 根据 数组 在 定义 时 约定 的 类 型 进行 限制 : 


let fibonacci: number[] = [1i, 1, 2, 3, 5]; 
fibonacci.push('8"'); 


// index.ts(2,16): error TS2345: Argument of type 'string' is no 
t assignable to parameter of type 'number'. 


上 例 中 ， push 方法 只 允许 传 入 number 类 型 的 参数 ， 但 是 却 传 了 一 个 
string 类 型 的 参数 ， 所 以 报错 了 。 


数组 泛 型 


也 可 以 使 用 数组 泛 型 (Array Generic) Array<elemType> 来 表示 数组 : 


let fibonacci: Array<number> = [1, 1, 2, 3, 5]; 
关于 泛 型 ， 可 以 参考 泛 型 一 章 。 
用 接口 表示 数组 
接口 也 可 以 用 来 描述 数组 : 


Interface NumberArray { 
[index: number]: number 
} 
let fibonacci: NumberArray = [1, 1, 2, 3, 5]; 


NumberArray 表示 : 只 要 index 的 类 型 是 number ， 那 么 值 的 类 型 必须 是 
number “。 


any 在 数组 中 的 应 用 
一 个 比较 常见 的 做 法 是 ， 用 any 表示 数组 中 允许 出 现任 意 类 型 : 


let list: any[] = ['Xcat Liu', 25, { website: "http://xcatliu.co 
m" }]; 


类 数组 


类 数组 (Array-like Object) 不 是 数组 类 型 ， 比 如 arguments 


下 
数组 的 类 型 


function sum() { 
let args: number[] = arguments; 


/ndexe ts(2 7) :errorms2322 0 Type e TArguments as nomassigna 
ble to type 'number[]'. 
VN Property 'push' is missing in type 'IArguments'. 


事实 上 常见 的 类 数组 都 有 自己 的 接口 定义 ， 如 IArguments ，NodeList 
HTMLCollection 等 : 


function sum() { 
let args: IArguments = arguments,; 


关于 内 置 对 象 ， 可 以 参考 内 置 对 象 一 章 。 


参考 


。 Basic Types # Array (中 文 版 ) 
。 |nterfaces # Indexable Types (中 文 版 ) 





。 上 一 章 : 对 象 的 类 型 一 接口 
。 下 一 章 : 函数 的 类 型 
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汐 数 的 类 型 
函数 是 JavaScript 中 的 一 等 公民 


函数 声明 


在 JavaScript 中 ， 有 两 种 常见 的 定义 函数 的 方式 
Declaration) 和 函数 表达 式 〈《Function Expression ) 


函数 声明 (Function 





// 兄 数 声明 (Function Declaration) 
funeclionmsum(x ey) 
return x + y; 


// 函数 表达 式 〈《Function Expression) 
let mySum = function (x, y) { 
return x + y; 


je 


一 个 函数 有 输入 和 输出 ， 要 在 TypeScript 中 对 其 进行 约束 ， 需 要 把 输入 和 输出 都 考 
虑 到 ， 其 中 函数 声明 的 类 型 定义 较 简 单 : 


function sum(x: number, y: number): number { 
return x + y; 


注意 ， 输 入 多 余 的 (或 者 少 于 要 求 的 ) 参数 ， 是 不 被 允许 的 : 


function sum(x: number, y: number): number £{ 
ie Un 攻关 二 二 


} 
sum(L 2 3 


// index.ts(4,1): error TS2346: Supplied parameters do not match 
any signature of call target. 


function sum(x: number, y: number): number £{ 
returmmnme x ty 


} 


sum(1); 


// index.ts(4,1): error TS2346: Supplied parameters do not match 
any signature of call target. 


如 果 要 我 们 现在 写 一 个 对 函数 表达 式 (Function Expression) 的 定义 ， 可 能 会 写成 
这 样 : 


let mySum = function (x: number, y: number): number { 
returm x ry 


je 


0 过 编译 的 ， 不 过 事实 上 ， 上 面 的 代码 只 对 等 号 右 侧 的 匿名 函数 进行 了 类 
型 定义 ， 而 等 号 左边 的 mySum ， 是 通过 赋值 操作 进行 类 型 推论 而 推断 出 来 的 。 如 
0 mySum 添加 类 型 ， 则 应 该 是 这 样 : 


let mySum: (x: number, y: number) => number = function (x: number 
rynumber): number { 
returm x ry; 


注意 不 要 混淆 了 TypeScript 中 的 => 和 ES6 中 的 => 。 


在 TypeScript 的 类 型 定义 中 ， => 用 来 表示 函数 的 定义 ， 左 边 是 输入 类 型 ， 需 要 


用 括号 括 起 来 ， 右 边 是 输出 类 型 。 


在 ES6 中 ，=> 叫做 箭头 函数 ， 应 用 十 分 广泛 ， 可 以 参考 ES6 中 的 箭头 函数 。 
用 接口 定义 函数 的 形状 
我 们 也 可 以 使 用 接口 的 方式 来 定义 一 个 函数 需要 符合 的 形状 : 
interface SearchFunc { 
(source: string, subString: string): boolean; 
} 
let mySearch: SearchFunc; 
mySearch = function(source: string, subString: string) { 
return source.search(subSstring) !== -1; 
} 
可 选 参数 
前 面 提 到 ， 输 入 多 余 的 〈 或 者 少 于 要 求 的 ) 参数 ， 是 不 允许 的 。 那 么 如 何 定义 可 选 


的 参数 呢 ? 


与 接口 中 的 可 选 属性 类 似 ， 我 们 用 ? 表示 可 选 的 参数 : 


function buildName(firstName: string, lastName?: string) { 
If (lastName) { 
return firstName + ' ' + lastName; 
} else { 
return firstName; 


} 
let tomcat = buildName('Tom', ‘'Cat'); 


Jet tom = buildName('Tom"' ); 


需要 注意 的 是 ， 可 选 参数 必须 接 在 必需 参数 后 面 。 换 句 话说， 可 选 参 数 后 面 不 允许 
再 出 现 必须 参数 了 : 


function buildName(firstName?: string, lastName: string) { 
If (firstName) { 
return firstName + ' ' + lastName; 
} else { 
return lastName; 


} 
let tomcat = buildName('Tom', 'Cat'); 
let tom = buildName(undefined, 'Tom'); 


// index.ts(1,40): error TS1016: A required parameter cannot fol 
low an optional parameter. 


参数 默认 值 


在 ES6 中 ， 我 们 允许 给 函数 的 参数 添加 默认 值 ，TypeScript 会 将 添加 了 默认 值 的 
参数 识别 为 可 选 参数 : 


function buildName(firstName: string, lastName: string = "Cat ') 
{ 

return firstName + ' ' + lastName; 
} 


let tomcat = buildName('Tom', 'Cat'); 
let tom = buildName('Tom'); 


此 时 就 不 受 「 可 选 参数 必须 接 在 必需 参数 后 面 」 的 限制 了 : 


function buildName(firstName: string = 'Tom', lastName: string) 
{ 

return firstName + ' ' + lastName; 
} 


let tomcat = buildName('Tom', 'Cat'); 
let cat = buildName(undefined, 'Cat'); 


关于 默认 参数 ， 可 以 参考 ES6 中 函数 参数 的 默认 值 。 


剩余 参数 
ES6 中 ， 可 以 使 用 ,,,rest 的 方式 获取 函数 中 的 剩余 参数 〈rest 参数 ) 


function push(array, ...items) { 
items.forEach(function(item) { 
array.push(item); 


je 


let a = []; 
push(a, 1, 2, 3); 


事实 上 ， items 是 一 个 数组 。 所 以 我 们 可 以 用 数组 的 类 型 来 定义 它 : 


准 UmecsonEpusmkaeay anvil Ttems anv pile 
items.forEach(function(item) { 
array.push(item); 


ja))p 


let a = []; 
push(a, 1, 2, 3); 


注意 ，rest 参数 只 能 是 最 后 一 个 参数 ， 关 于 rest 参数 ， 可 以 参考 ES6 中 的 rest 参 
数 。 


重 载 允 许 一 个 函数 接受 不 同 数量 或 类 型 的 参数 时 ， 作 出 不 同 的 处 理 。 


比如 ， 我 们 需要 实现 一 个 函数 reverse ， 输 入 数字 123 的 时 候 ， 输 出 反 转 的 数 
字 321 ， 输 入 字符 串 'hello' 的 时 候 ， 输 出 反 转 的 字符 串 'olleh' 。 


利用 联合 类 型 ， 我 们 可 以 这 么 实现 : 


function reverse(x: number | string): number | String { 
if (typeof x === 'number') { 
return Number(x.toString().split('').reverse().join("'')) 


} else if (typeof x === 'string') { 
return x.split('').reverse().join("''); 


然而 这 样 有 一 个 缺点 ， 就 是 不 能 够 精确 的 表达 ， 输 入 为 数字 的 时 候 ， 输 出 也 应 该 为 
数字 ， 输 入 为 字符 串 的 时 候 ， 输 出 也 应 该 为 字符 串 。 


这 时 ， 我 们 可 以 使 用 重 载 定义 多 个 reverse 的 函数 类 型 : 


function reverse(x: number): number; 
function reversel(xstring) strings 
funetronnmreversel(X numbermn string numbermlstrnone 
if (typeof x === 'number') { 
return Number(x.toString().split('').reverse().join("')) 


} else if (typeof x === 'string') { 
return x.split('').reverse().join(''); 


上 例 中 ， 我 们 重复 定义 了 多 次 函数 reverse ， 前 几 次 都 是 函数 定义 ， 最 后 一 次 是 
函数 实现 。 在 编辑 器 的 代码 提示 中 ， 可 以 正确 的 看 到 前 两 个 提示 。 


注意 ，TypeScript 会 优先 从 最 前 面 的 函数 定 义 开始 匹配 ， 所 以 多 个 函数 定义 如 果 有 
包含 关系 ， 需 要 优先 把 精确 的 定义 写 在 前 面 。 


e Functions (中 文 版 ) 

。 Functions #Function Types (中 文 版 ) 
JS 函数 式 编程 指南 

ES6 中 的 箭头 函数 


有 函 数 的 类 型 
e ES6 中 远 数 参数 的 默认 值 


e ES6 中 的 rest 参数 


e@ 上 一 章 : 数组 的 类 型 
。 下 一 章 : 类 型 断言 
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类 型 断言 


类 型 断言 (Type Assertion ) 可 以 用 来 手动 指定 一 个 值 的 类 型 。 


名 


值 as 类 型 


在 tsx 语法 (React 的 jsx 语法 的 ts 版 ) 中 必须 用 后 一 种 。 


例子 : 将 一 个 联合 类 型 的 变量 指定 为 一 个 更 加 具体 
的 类 型 


之 前 提 到 过 ， 当 TypeScript 不 确定 一 个 联合 类 型 的 变量 到 底 是 哪个 类 型 的 时 候 ， 我 
们 只 能 访问 此 联合 类 型 的 所 有 类 型 里 共有 的 属性 或 方法 : 


function'getLength(something: string | number): number { 
return something.1length; 


// index.ts(2,22): error TS2339: Property 'length' does not exis 
t on type 'string | number'. 
HY Property 'length' does not exist on type 'number'. 


而 有 时 候 ， 我 们 确实 需要 在 还 不 确定 类 型 的 时 候 就 访问 其 中 一 个 类 型 的 属性 或 方 
法 ， 比 如 : 


function getLength(something: String | number): number { 
If (something.length) { 
return something.1length; 
} else { 
return something.toString().1length,; 


// index.ts(2,19): error TS2339: Property 'length' does not exis 
t on type 'string | number'. 

// Property 'length' does not exist on type 'number'. 

// index.ts(3,26): error TS2339: Property ' length ' does not exis 
t on type 'string | number'. 

YN Property 'length' does not exist on type 'number'. 


上 例 中 ， 获 取 something.length 的 时 候 会 报错 。 


此 时 可 以 使 用 类 型 断言 ， 将 something 断言 成 string 


function getLength(something: string | number): number { 
If ((<string>something).length) { 
return (<string>something).1length,; 
else lt{ 
return something.toString().1length; 


类 型 断言 的 用 法 如 上 ， 在 需要 断言 的 变量 前 加 上 <Type> 即 可 。 
类 型 断言 不 是 类 型 转换 ， 断 言 成 一 个 联合 类 型 中 不 存在 的 类 型 是 不 允许 的 : 


function toBoolean(something: String | number): boolean { 
return <boolean>something,; 


// index.ts(2,10): error TS2352: Type 'string | number' cannot b 
e converted to type 'boolean'. 
YN Type 'number' is not comparable to type 'boolean'. 
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类 型 断言 


e TypeScript Deep Dive / Type Assertion 


。 Advanced Types# Type Guards and Differentiating Types (中 文 版 ) 


e 上 一 章 : 函数 的 类 型 
e 下 一 章 : 声明 文件 
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声明 文件 
当 使 用 第 三 方 库 时 ， 我 们 需要 引用 它 的 声明 文件 。 


声明 语句 


假如 我 们 想 使 用 第 三 方 库 ， 比 如 jQuery， 我 们 通常 这 样 获取 一 个 id 是 foo 的 
元 素 : 
$( '#foo ' ) ; 


OF 
jQuery( '#foo ' ) ， 


但 是 在 TypeScript 中 ， 我 们 并 不 知道 $ 或 jQuery 是 什么 东西 : 
jQuery( '#foo ' ) ， 


”ndexe ts e204 Cannoe me namen er 


这 时 ， 我 们 需要 使 用 declare 关键 字 来 定义 它 的 类 型 ， 帮 助 TypeScript 判断 我 
们 传 入 的 参数 类 型 对 不 对 : 


declare var jQuery: (string) => any 


jQuery( '#foo ' ); 


declare 定义 的 类 型 只 会 用 于 编译 时 的 检查 ， 编 译 结果 中 会 被 删除 。 


上 例 的 编译 结果 是 : 


jQuery( '#foo ' ); 


严明 文件 


通常 我 们 会 把 类 型 声明 放 到 一 个 单独 的 文件 中 ， 这 就 是 声明 文件 : 
// jQuery .d.ts 


declare var jQuery: (string) => any 


我 们 约定 声明 文件 以 ,d.,ts 为 后 级 。 


然后 在 使 用 到 的 文件 的 开头 ， 用 「 三 斜 线 指令 」 表示 引 用 了 声明 文件 : 
/// <reference path="./jQuery.d.ts" /> 


jQuery( '#foo ' ); 


大 大 N + 圭 N 
第 三 方 声明 文件 

当然 ， jQuery 的 声明 文件 不 需要 我 们 定义 了 ， 已 经 有 人 帮 我 们 定义 好 了 : jQuery in 
DefinitelyTyped ° 


我 们 可 以 直接 下 载 下 来 使 用 ， 但 是 更 推荐 的 是 使 用 工具 统一 管理 第 三 方 库 的 声明 文 
件 。 


社区 已 经 有 多 种 方式 引入 声明 文件 ， 不 过 TypeScript 2.0 推荐 使 用 @types 来 管 
理 。 


@types 的 使 用 方式 很 简单 ， 直 接 用 npm 安装 对 应 的 声明 模块 即 可 ， 以 jQuery 举 
例 : 


npm install @types/jquery --save-dev 
可 以 在 这 个 页 面 搜索 你 需要 的 声明 文件 。 


e Writing Declaration Files (中 文 版 ) 
e Triple-Slash Directives (中 文 版 ) 


声明 文件 


= 
已 


e@ 上 一 章 


内 置 对 象 


e@ 下 一 章 : 
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内 置 对 舱 


JavaScript 中 有 很 多 内 置 对 象 ， 它 们 可 以 直接 在 TypeScript 中 当做 定义 好 了 的 类 
型 。 


内 置 对 象 是 指 根据 标准 在 全 局 作用 域 (Global) 上 存在 的 对 象 。 这 里 的 标准 是 指 
ECMAScript 和 其 他 环境 (比如 DOM) 的 标准 。 


ECMAScript 的 内 置 对 象 


ECMAScript 标准 提供 的 内 置 对 象 有 : 
Boolean 、 Error 、 Date 、 RegExp 村。 


我 们 可 以 在 TypeScript 中 将 变量 定义 为 这 些 类 型 : 


let b: Boolean = new Boolean(1); 

let e: Error = new Error('Error occurred ) ， 
let d: Date = new Date(); 

let r: RegExp = /[a-z]/; 


更 多 的 内 置 对 象 ， 可 以 查看 MDN 的 文档 。 


而 他 们 的 定义 文件 ， 则 在 TypeScript 核心 库 的 定义 文件 中 。 


DOM 和 BOM 的 内 置 对 象 


DOM 和 BOM 提供 的 内 置 对 象 有 : 
Document 、 HTMLElement 、 Event 、 NodeList 等 。 


TypeScript 中 会 经 常用 到 这 些 类 型 : 


let body: HTMLElement = document ,body ， 

let allDiv: NodeList = document.querySelectorAll('div'); 

document .addEventListener('click', function(e: MouseEvent) { 
// Do something 


}); 


它们 的 定义 文件 同样 在 TypeScript 核心 库 的 定义 文件 中 。 


TypeScript 核心 库 的 定义 文件 


TypeScript 核心 库 的 定义 文件 中 定义 了 所 有 浏览 器 环境 需要 用 到 的 类 型 ， 并 且 是 预 
置 在 TypeScript 中 的 。 


当 你 在 使 用 一 些 常 用 的 方法 的 时 候 ，TypeScript 实际 上 已 经 帮 你 做 了 很 多 类 型 判断 
的 工作 了 ， 比 如: 


Math.pow(10, '2°"'); 


// index.ts(1,14): error TS2345: Argument of type 'string' is no 
t assignable to parameter of type 'number'. 


上 面 的 例子 中 ， Math.pow 必须 接受 两 个 number 类 型 的 参数 。 事 实 上 
Math.pow 的 类 型 定义 如 下 : 


interface Math { 
J 
* Returns the value of a base expression taken to a specifi 
ed power. 
* @param x The base value of the expression. 
* @param y The exponent value of the expression. 
WY 
pow(x: number, y: number): number ; 


再 举 一 个 DOM 中 的 例子 : 


document .addEventListener( ' click'，function(e) { 
console.log(e.targetCurrent); 


}); 


// index.ts(2,17): error TS2339: Property 'targetCurrent' does n 
ot exist on type 'MouseEvent'. 


上 面 的 例子 中 ， addEventListener 方法 是 在 TypeScript 核心 库 中 定义 的 : 


Interface Document extends Node, GlobalEventHandlers, NodeSelect 
or, DocumentEvent { 

addEventListener(type: string, listener: (ev: MouseEvent) => 
any, useCapture?: boolean): void; 


} 
i 


所 以 e 被 推断 成 了 MouseEvent ， 而 MouseEvent 是 没有 targetCurrent 
属性 的 ， 所 以 报错 了 。 


注意 ，TypeScript 核心 库 的 定义 中 不 包含 Node.js 部 分 。 
用 TypeScript 写 Node.js 


Node.js 不 是 内 置 对 象 的 一 部 分 ， 如 果 想 用 TypeScript 写 Node.js， 则 需要 引入 第 
三 方 声明 文件 : 


npm install @types/node --save-dev 


沙 


戎 考 


@ 内 置 对 则 
e TypeScript 核心 库 的 定义 文件 


@ 上 一 章 声明 文件 
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@ 声明 合并 


些 高 级 的 类 型 与 技术 ， 具 体内 容 包 括 : 


Ol 


~ 


人 
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类 型 别名 
类 型 别名 用 来 给 一 个 类 型 起 个 新 名 字 。 
简单 的 例子 


type Name = string; 
type NameResolver = () => string; 
type NameOrResolver = 


Name | NameResolver; 
function getName(n: NameOrResolver): Name { 
if (typeof n === 'string') { 
return n; 


} 
else { 


return n(); 


上 例 中 ， 我 们 使 用 type 创建 类 型 别名 。 


类 型 别名 常用 于 联合 类 型 。 


参考 


NS 


。 Advanced Types #Type Aliases (中 文 版 ) 


type EventNames = 'click' | 'scroll' | 'mousemove'; 
function handleEvent(ele: Element, event: EventNames) { 
// do something 


handleEvent (document .getElementById('hello'), 'scroll'); // 没 问题 


handleEvent (document .getElementById('world'), 'dbclick'); // 报错 
，event 不 能 为 'dbclick' 


/index ts (A ermomns2s45 Angumneneeormey reno Ls 
not assignable to parameter of type 'EventNames'. 


本 


上 例 中 ， 我 们 使 用 type 定 了 一 个 字符 串 字 面 量 类 型 EventNames ， 它 只 能 取 
三 种 字符 串 中 的 一 种 。 


注意 ， 类 型 别名 与 字符 串 字 面 量 类 型 都 是 使 用 type 进行 定义 。 


e。 Advanced Types#Type Aliases (中 文 版 ) 


LU) 
GO) 
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元 组 

数组 合并 了 相同 类 型 的 对 象 ， 而 元 组 (Tuple) 合并 了 不 同类 型 的 对 象 。 
元 组 起 源 于 隐 数 编程 语言 (如 F#) ,在 这 些 语言 中 频繁 使 用 元 组 。 
简单 的 例子 

定义 一 对 值 分 别 为 string 和 number 的 元 组 : 


let xcatliu: [string, number] = ['Xcat Liu', 25]; 


当 赋 值 或 访问 一 个 已 知 索 引 的 元 素 时 ， 会 得 到 正确 的 类 型 : 
let xcatliu: [string, number]; 
xcatliu[0] = 'Xcat Liu'; 


xcatliu[1] = 25; 


xcatliu[0].slice(1); 
xcatliu[1].toFixed(2); 


也 可 以 只 赋值 其 中 一 项 : 


let xcatliu: [String，number]， 
xcatliu[0] = 'Xcat Liu'; 


但 是 当 直 接 对 元 组 类 型 的 变量 进行 初始 化 或 者 赋值 的 时 候 ， 需 要 提供 所 有 元 组 类 型 
中 指定 的 项 。 


let xcatliu: [string, number]; 
xcatliu = ['Xcat Liu', 25]; 


let xcatliu: [string, number] = ['Xcat Liu']; 


/inNndeX ts errors2322 TIVDen seingl i no assohnabd 
e to type '[string, number]'. 
ZY Property '1' is missing in type '[string]'". 


let xcatliu: [string, number]; 
xcatliu = ['Xcat Liu']; 
xcatliu[1|] = 25; 


// index.ts(2,1): error TS2322: Type '[string]' is not assignabl 


e to type '[string, number]'. 
// Property '1' is missing in type '[string]'". 


越界 的 元 素 
当 赋 值 给 越界 的 元 素 时 ， 它 类 型 会 被 限制 为 元 组 中 每 个 类 型 的 联合 类 型 : 


let xcatliu: [string, number]; 
Xeatdlnue Xecat au 25 00 hee /xcatlnu com 


上 面 的 例子 中 ， 数 组 的 第 三 项 满足 联合 类 型 string | number 。 


let xcatliu: [string, number]; 
xcatliu = ['Xcat Liu', 25]; 
xcatliu.push('http://xcatliu.com/'); 
xcatliu.push(true); 


// index.ts(4,14): error TS2345: Argument of type 'boolean' is nN 


ot assignable to parameter of type 'string | number'. 
YA Type 'boolean' is not assignable to type 'number'. 


当 访 问 一 个 越界 的 元 素 ， 也 会 识别 为 元 组 中 每 个 类 型 的 联合 类 型 : 
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NVS 
二 


let xcatliu: [string, number]; 
Xeatdau = Xecat au 2500 hoe//Xcatluu comAe ds 


console.log(xcatliu[2].slice(1)); 


// index.ts(4,24): error TS2339: Property 'slice' does not exist 
on type 'string | number'. 


之 前 提 到 过 ， 如 果 一 个 值 是 联合 类 型 ， 我 们 只 能 访问 此 联合 类 型 的 所 有 类 型 里 共有 
的 属性 或 方法 。 


参考 


e Basic Types #Tuple (中 文 版 ) 


e 上 一 章 : 字符 串 字 面 量 类 型 
e 下 一 章 : 枚 举 
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枚 举 


枚 举 (Enum) 类 型 用 于 取 值 被 限定 在 一 定 范围 内 的 场景 ， 比 如 一 周 只 能 有 七 天 ， 
颜色 限定 为 红 绿 蓝 等 。 


全 记 
简单 的 例子 
枚 举 使 用 enum 关键 字 来 定义 : 
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; 


枚 举 成 员 会 被 赋值 为 从 90 开始 递增 的 数字 ， 同 时 也 会 对 枚 举 值 到 枚 举 名 进行 反 向 
映射 : 


enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; 


console.log(Days["Sun"] === 0); // true 
console.log(Days["Mon"] === 1); // true 
console.log(Days["Tue"] === 2); // true 
console.log(Days["Sat"] === 6); // true 
console.log(Days[0] === "Sun"); // true 
console.log(Days[1] === "Mon"); // true 
console.log(Days[2] === "Tue"); // true 
console.log(Days[6] === "Sat"); // true 


事实 上 ， 上 面 的 例子 会 被 编译 为 : 


Var Days 

(funetion (Days) 1 
Days[Days["Sun"] 
Days[Days["Mon"] 
Days[Days["Tue"] 
Days[Days["wed"] 
Days[Days["Thu"] 
Days[Days["Fri"] 
Days[Days["Sat"] 


})(Days || (Days = {})) 


手动 赋值 


我 们 也 可 以 给 枚 举 项 手动 赋值 : 


上 面 的 例子 中 ， 未 手动 赋值 的 枚 举 项 会 接着 上 一 个 枚 举 项 递增 。 


如 果 未 手动 赋值 的 枚 举 项 与 手动 赋值 的 重复 了 ，TypeScript 是 不 会 


enum Days {Sun = 7， 


Mon 


console.log(Days["Sun" 


console.log(Days["Mon" 


console.log(Days["Tue" 


console.log(Days["Sat" 


的 : 


Oe= Su 
= Mom, 
2 = Ue 
Se= We 
4] = "Thu"; 
5 = 
GlE=9 .Sat 


" 


= 1, Tue, Wed, Thu, Fri, Sat}; 


7 
0 
2); 
Se 


// true 
// true 
// true 
// true 


Ar 
符 


enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat}; 


console.log(Days["Sun"] 


console.log(Days["Wwed"| 


console.1log(Days[3] 
console.1log(Days[3 


= 
= 
SU 及 
"Wed" ) ， 


// true 
// true 
// false 
// true 


党 到 这 一 


点 


\N\ 


上 面 的 例子 中 ， 递 增 到 3 的 时 候 与 前 面 的 Sun 的 取 值 重复 了 ， 但 是 TypeScript 
并 没有 报错 ， 导 致 Days[3] 的 值 先是 "Sun" ， 而 后 又 被 "Wed" 履 盖 了 。 编 
译 的 结果 是 : 


var Days; 

(function (Days) { 
Days[Days["Sun"] = 3] = "Sun"; 
Days[Days["Mon"] = 1] = "Mon"; 
Days[Days["Tue"] = 2] = "Tue"; 
Days[Days["Wed"] = 3] = "Wed"; 
Days[Days["Thu"] = 4] = "Thu"; 
Days[Days["Fri"] = 5] = "Fri"; 
Days[Days["Sat"] = 6] = "Sat"; 

})(Days || (Days = {})); 


所 以 使 用 的 时 候 需 要 注意 ， 最 好 不 要 出 现 这 种 覆盖 的 情况 。 


手动 赋值 的 枚 举 项 可 以 不 是 数字 ， 此 时 需要 使 用 类 型 断言 来 让 tsc 无 视 类 型 检查 ( 纺 
译 出 的 js 仍然 是 可 用 的 ) : 


enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"}; 


var Days; 

(function (Days) { 
Days[Days["Sun"] = 7] = "Sun"; 
Days[Days["Mon"] = 8] 
Days[Days["Tue"] = 9] Us 
Days[Days["Wed"] = 10] = "Wed"， 
Days[Days["Thu"] = 11] = "Thu"; 
Days[Days["Fri"] = 12] = "Fri",; 
Days[Days["Sat"] = "S"] = "Sat";， 

})(Days || (Days = {})); 


"MonN" :> 


当然 ， 手 动 赋值 的 枚 举 项 也 可 以 为 小 数 或 负数 ， 此 时 后 续 未 手动 赋值 的 项 的 递增 步 
长 仍 为 1 


enum Days {Sun = 7，Mon = 1.5, Tue, Wed, Thu, Fri, Sat}; 


console.log(Days["Sun"] === 7); // true 

console.log(Days["Mon"] === 1.5); // true 
console.log(Days["Tue"] === 2.5); // true 
console.log(Days["Sat"] === 6.5); // true 


常数 项 和 计算 所 得 


枚 举 项 有 两 种 类 型 : 常数 项 (constant member) 和 计算 所 得 项 (computed 
member) 。 


前 面 我 们 所 举 的 例子 都 是 常数 项 ， 一 个 典型 的 计算 所 得 项 的 例子 : 


enum Color {Red, Green, Blue = "blue".length}; 


上 面 的 例子 中 ， "blue" ,length 就 是 一 个 计算 所 得 项 。 


上 面 的 例子 不 会 报错 ， 但 是 如 果 紧 接 在 计算 所 得 项 后 面 的 是 未 手动 赋值 的 项 ， 那 么 
它 就 会 因为 无 法 获得 初始 值 而 报错 : 


enum Color {Red = "red".length, Green, Blue}; 


// index.ts(1,33): error TS1061: Enum member must have initializ 
er. 
// index.ts(1,40): error TS1061: Enum member must have initializ 


Si 


下 面 是 常数 项 和 计算 所 得 项 的 完整 定义 ， 部 分 引用 自 中 文 手册 - 枚 举 : 
当 满 足以 下 条 件 时 ， 枚 举 成 员 被 当 作 是 常数 : 


。 不 具有 初始 化 函数 并 且 之 前 的 枚 举 成 员 是 常数 。 在 这 种 情况 下 ， 当 前 枚 举 成 员 
的 值 为 上 一 个 枚 举 成 员 的 值 加 1 。 但 第 一 个 枚 举 元 素 是 个 例外 。 如 果 它 没有 
初始 化 方法 ， 那 么 它 的 初始 值 为 9 。 

@ 枚 举 成 员 使 用 常数 枚 举 表达 式 初 始 化 。 常 数 枚 举 表 达 式 是 TypeScript 表达 式 的 
子 集 ， 它 可 以 在 编译 阶段 求 值 。 当 一 个 表达 式 满足 下 面条 件 之 一 时 ， 它 就 是 一 


个 常数 枚 举 表达 式 : 

o 数字 字面 量 

o 引用 之 前 定义 的 常数 枚 举 成 员 (可 以 是 在 不 同 的 枚 举 类 型 中 定义 的 ) 如 果 
这 个 成 员 是 在 同一 个 枚 举 类 型 中 定义 的 ， 可 以 使 用 非 限 定名 来 引用 

o 带 括 号 的 常数 枚 举 表 达 式 

o + ，- ，~ 一 元 运算 符 应 用 于 常数 枚 举 表达 式 

o BE Ee ,A 二 元 运算 符 ， 
常数 枚 举 表达 式 做 为 其 一 个 操作 对 象 。 若 常数 枚 举 表 达 式 求 值 后 为 NaN 或 
Infinity， 则 会 在 编译 阶段 报错 


所 有 其 它 情 况 的 枚 举 成 员 被 当 作 是 需要 计算 得 出 的 值 8 


常数 枚 举 
常数 枚 举 是 使 用 const enum 定义 的 枚 举 类 型 : 


const enum Directions { 


Up, 

Down, 
Left, 
Right 


let directions = [Directions.Up, Directions.Down, Directions.Lef 
t, Directions.Right]; 


常数 枚 举 与 普通 枚 举 的 区 别 是 ， 它 会 在 编译 阶段 被 删除 ， 并 且 不 能 包含 计算 成 员 。 


上 例 的 编译 结果 是 


Va ectuonse so Uo /DOW 2 /ef /9 3/ 0R 
nee /ls 


假如 包含 了 计 草 成 员 ， 则 会 在 编译 阶段 报错 : 


const enum Color {Red, Green, Blue = "blue".length}; 


// index.ts(1,38): error TS2474: In 'const' enum declarations me 
mber rinitializer mustube constant express1ion.: 


外 部 枚 举 
外 部 枚 举 (Ambient Enums ) 是 使 用 declare enum 定义 的 枚 举 类 型 : 


declare enum Directions { 
Up, 
Down, 
Left, 
Right 


let directions = [Directions.Up, Directions.Down, Directions.Lef 
t, Directions.Right]; 


之 前 提 到 过 ， declare 定义 的 类 型 只 会 用 于 编译 时 的 检查 ， 编 译 结果 中 会 被 删 
除 。 


上 例 的 编译 结果 是 : 


var directions = [Directions.Up, Directions.Down, Directions.Lef 
t, Directions.Right]; 


外 部 枚 举 与 声明 语句 一 样 ， 常 出 现在 声明 文件 中 。 


同时 使 用 declare 和 const 也 是 可 以 的 : 


declare const enum Directions { 


Up, 

Down, 
Left, 
Right 


let directions = [Directions.Up, Directions.Down, Directions.Lef 
t, Directions.Right]; 


编译 结果 : 


van darectons =U /DoWn 2/ ef /3/R 
ele “|e 


TypeScript 的 枚 举 类 型 的 概念 来 源 于 C#。 


e Enums (中 文 版 ) 
e C#Enum 


米 
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传统 方法 中 ，JavaScript 通过 构造 函数 实现 类 的 概念 ， 通 过 原型 链 实现 继承 。 而 在 
ES6 中 ， 我 们 终于 迎 来 了 class 。 


TypeScript 除了 实现 了 所 有 ES6 中 的 类 的 功能 以 外 ， 还 添加 了 一 些 新 的 用 法 。 


这 一 节 主要 介绍 类 的 用 法 ， 下 一 节 再 介绍 如 何 定义 类 的 类 型 。 


类 的 概念 


虽然 JavaScript 中 有 类 的 概念 ， 但 是 可 能 大 多 数 JavaScript 程序 员 并 不 是 非常 熟 
悉 类 ， 这 里 对 类 相关 的 概念 做 一 个 简单 的 介绍 。 


e@ 类 (Class) : 定义 了 一 件 事物 的 抽象 特点 ， 包 含 它 的 属性 和 方法 

e@ 对 象 (Object) : 类 的 实例 ， 通 过 new 生成 

e 面向 对 象 (OOP ) 的 三 大 特性 : 封装 、 继 承 、 多 态 

。 封装 (Encapsulation) : 将 对 数据 的 操作 细节 隐藏 起 来 ， 只 暴露 对 外 的 接口 。 
外 界 调用 端 不 需要 (也 不 可 能 ) 知道 细节 ， 就 能 通过 对 外 提供 的 接口 来 访问 该 
对 象 ， 同 时 也 保证 了 外 界 无 法 任意 更 改 对 象 内 部 的 数据 

。 继承 (Inheritance) : 子 类 继承 父 类 ， 子 类 除了 拥有 父 类 的 所 有 特性 外 ， 还 有 
一 些 更 具体 的 特性 

。 多 态 (Polymorphism) : 由 继承 而 产生 了 相关 的 不 同 的 类 ， 对 同一 个 方法 可 以 
有 不 同 的 响应 。 比 如 Cat 和 Dog 都 继承 自 Animal ， 但 是 分 别 实现 了 自 
己 的 eat 方法 。 此 时 针对 某 一 个 实例 ， 我 们 无 需 了 解 它 是 Cat 还 是 
Dog ， 就 可 以 直接 调用 eat 方法， 程序 会 自动 判断 出 来 应 该 如 何 执行 
eat 

。 存 取 器 (getter & setter) : 用 以 改变 属性 的 读 取 和 赋值 行为 

e。 修饰 符 (Modifiers) : 修饰 符 是 一 些 关键 字 ， 用 于 限定 成 员 或 类 型 的 性 质 。 比 
如 public 表示 公有 属性 或 方法 

e@ 抽象 类 (Abstract Class) : 抽象 类 是 供 其 他 类 继承 的 基 类 ， 抽 象 类 不 允许 被 
实例 化 。 抽 象 类 中 的 抽象 方法 必须 在 子 类 中 被 实现 

。 接口 (Interfaces) : 不 同类 之 间 公 有 的 属性 或 方法 ， 可 以 抽象 成 一 个 接口 。 接 
口 可 以 被 类 实现 (implements) 。 一 个 类 只 能 继承 自 另 一 个 类 ， 但 是 可 以 实现 
多 个 接口 


ES6 中 类 的 用 法 
下 面 我 们 先 回顾 一 下 ES6 中 类 的 用 法 ， 更 详细 的 介绍 可 以 参考 ECMAScript 6 入 门 
- Class。 
属性 和 方法 
使 用 class 定义 类 ， 使 用 constructor 定义 构造 隐 数 。 
通过 new 生成 新 实例 的 时 候 ， 会 自动 调用 构造 隐 数 。 
Class Animal { 


constructor(name) { 
this.name = name; 


} 
sayHi() { 

return My name is ${this.name} ; 
} 


let a = new Animal('Jack'); 
console.log(a.sayHi()); // My name is Jack 


类 的 继承 


使 用 extends 关键 字 实 现 继承 ， 子 类 中 使 用 super 关键 字 来 调用 父 类 的 构造 
函数 和 方法 。 


class Cat extends Animal { 
constructor(name) { 
super (name); // 调用 父 类 的 constructor(name) 
console.1log(this.name); 


} 
sayHi() { 

return 'Meow，' + Super,.,sayHi(); // 调用 父 类 的 sayHi() 
} 


let c = new Cat('Tom'); // Tom 
console.log(c.sayHi()); // Meow, My name is Tom 


存 取 器 
使 用 getter 和 setter 可 以 改变 属性 的 赋值 和 读 取 行 为 : 


class Animal { 
constructor(name) { 
this.name = name; 


get name() { 
return 'Jack'; 


set name(value) { 
console.log('setter: ' + value); 


let a = new Animal('Kitty'); // setter: Kitty 
a.name = 'Tom'; // setter: Tom 
console.log(a.name); // Jack 


静态 方法 


使 用 static 修饰 符 修 饰 的 方法 称 为 静态 方法 ， 它 们 不 需要 实例 化 ， 而 是 直接 通 
过 类 来 调用 : 


class Animal { 
static isAnimal(a) { 
return a instanceof Animal; 


let a = new Animal('Jack'); 
Animal.isAnimal(a); // true 
a.isAnimal(a); // TypeError: a.isAnimal is not a function 


ES7 中 类 的 用 法 


ES7 中 有 一 些 关于 类 的 提案 ，TypeScript 也 实现 了 它们 ， 这 里 做 一 个 简单 的 介绍 。 


实例 属性 


ES6 中 实例 的 属性 只 能 通过 构造 函数 中 的 this.xxx 来 定义 ，ES7 提案 中 可 以 直 
接 在 类 里 面 定 义 : 


class Animal { 
name = 'Jack'; 


constructor() { 
/7 


let a = new Animal(); 
console.log(a.name); // Jack 


静态 属性 


ES7 提案 中 ， 可 以 使 用 static 定义 一 个 静态 属性 : 


class Animal { 
static num = 42; 


constructor() { 


VA 


console.log(Animal.num); // 42 


TypeScript 中 类 的 用 法 


public private 和 protected 


TypeScript 可 以 使 用 三 种 访问 修饰 符 (Access Modifiers) ， 分 别 是 


public 、 private 和 protected 。 


e。 public 修饰 的 属性 或 方法 是 公有 的 ， 可 以 在 任何 地 方 被 访问 到 ， 默 认 所 有 
的 属性 和 方法 都 是 public 的 

e private 修饰 的 属性 或 方法 是 私有 的 ， 不 能 在 声明 它 的 类 的 外 部 访问 

e protected 修饰 的 属性 或 方法 是 受 保护 的 ， 它 和 private 类似， 区别 是 
它 在 子 类 中 也 是 允许 被 访问 的 


下 面 举 一 些 例子 : 


class Animal { 
public name; 
public constructor(name) { 
this.name = name; 


let a = new Animal('Jack'); 
console.log(a.name); // Jack 
a.name = 'Tom'; 
console.log(a.name); // Tom 


上 面 的 例子 中 ， name 被 设置 为 了 public ， 所 以 直接 访问 实例 的 name 属性 
是 允许 的 。 


很 多 时 候 ， 我 们 希望 有 的 属性 是 无 法 直接 存 取 的 ， 这 时 候 就 可 以 用 private 了 : 


class Animal { 
private name; 
public constructor(name) { 
this.name = name; 


let a = new Animal('Jack'); 
console.log(a.name); // Jack 
a.name = 'Tom'; 


// index.ts(9,13): error TS2341: Property 'name' is private and 
only accessible within class 'Animal'. 
// index.ts(10,1): error TS2341: Property 'name' is private and 
only accessible within class 'Animal'. 


需要 注意 的 是 ，TypeScript 编译 之 后 的 代码 中 ， 并 没有 限制 private 属性 在 外 部 
的 可 访问 性 。 


上 面 的 例子 编译 后 的 代码 是 : 


var Animal = (function () { 
function Animal(name) { 
this.name = name; 
} 
return Animal; 
}()); 
var a = new Animal('Jack"'); 
console.log(a.name); 
a.name = 'Tom'; 


使 用 private 修饰 的 属性 或 方法 ， 在 子 类 中 也 是 不 允许 访问 的 : 


class Animal { 
private name; 
public constructor(name) { 
this.name = name; 


class Cat extends Animal { 
constructor(name) { 
super (name); 
console.1log(this.name); 


// index.ts(11,17): error TS2341: Property 'name' is private and 
only accessible within class 'Animal ' ， 


而 如 果 是 用 protected 修饰 ， 则 允许 在 子 类 中 访问 : 


class Animal { 
protected name; 
public constructor(name) { 
this.name = name; 


class Cat extends Animal { 
constructor(name) { 
super (name); 
console.1log(this.name); 


抽象 类 
abstract 用 于 定义 抽象 类 和 其 中 的 抽象 方法 。 
什么 是 抽象 类 ? 


首先 ， 抽 象 类 是 不 允许 被 实例 化 的 : 


abstract class Animal { 
public name; 
public constructor(name) { 
this.name = name; 


} 
public abstract sayHi(); 


let a = new Animal('Jack'); 


// index.ts(9,11): error TS2511: Cannot create an instance of th 
e abstract class 'Animal'. 


上 面 的 例子 中 ， 我 们 定义 了 一 个 抽象 类 Animal ， 并 且 定 义 了 一 个 抽象 方法 
sayHi 。 在 实例 化 抽象 类 的 时 候 报错 了 。 


其 次 ， 抽 象 类 中 的 抽象 方法 必须 被 子 类 实现 : 


abstract class Animal { 
public name; 
public constructor(name) { 
this.name = name; 


} 
public abstract sayHi(); 


class Cat extends Animal { 
public eat() { 
console.log( ${this.name} is eating. ); 


let cat = new Cat('Tom'); 


// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does no 
t implement inherited abstract member 'sayHi' from class 'Animal 
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上 面 的 例子 中 ， 我 们 定义 了 一 个 类 Cat 继承 了 抽象 类 Animal 
抽象 方法 sayHi ， 所 以 编译 报错 了 。 


下 面 是 一 个 正确 使 用 抽象 类 的 例子 : 


abstract class Animal { 
public name 
public constructor(name) { 
this.name = name; 


} 
public abstract sayHi(); 


class Cat extends Animal { 
public sayHi() { 
console.log( Meow, My name is ${this.name} ); 


let cat = new Cat('Tom'); 


上 面 的 例子 中 ， 我 们 实现 了 抽象 方法 sayHi ， 编 译 通过 了 。 


需要 注意 的 是 ， 即 使 是 抽象 方法 ，TypeScript 的 编译 结果 中 ， 仍 然 会 存在 这 个 类 ， 


上 面 的 代码 的 编译 结果 是 : 


Var _ extends = (this && this. extends) || function (d, b) { 
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
function _() { this.constructor = d; } 
d.prototype = b === null ? Object.create(b) : (__.prototype 

= b.prototype, new _ ()); 

}; 

var Animal = (function () { 
function Animal(name) { 

this.name = name; 
} 
return Animal; 
}()); 
var Cat = (function (_super) { 
_ extends(Cat, _super); 
unetionneat() { 
_Ssuper.apply(this, arguments ) ， 
} 
Cat.prototype.sayHi = function () { 
console.log('Meow, My name is ' + this.name); 
}; 
return Cat,; 
}(Animal ) ); 
var cat = new Cat('Tom'); 


类 的 类 型 


给 类 加 上 TypeScript 的 类 型 很 简单 ， 与 接口 类 似 : 


class Animal { 
name: string; 
constructor(name: string) { 
this.name = name; 


} 
sayHi(): string { 
return ‘My name is ${this.name} ， 


let a: Animal = new Animal('Jack"'); 
console.log(a.sayHi()); // My name is Jack 


e。 Classes (中 文 版 ) 
e ECMAScript 6 入 门 - Class 
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之 前 学 习 过 ， 接 口 (Interfaces) 可 以 用 于 对 『「 对 象 的 形状 (Shape) 」 进 行 描 述 。 


这 一 章 主要 介绍 接口 的 另 一 个 用 途 ， 对 类 的 一 部 分 行为 进行 抽象 。 


类 实 现 接口 


实现 (implements) 是 面向 对 象 中 的 一 个 重要 概念 。 一 般 来 讲 ， 一 个 类 只 能 继承 自 
另 一 个 类 ， 有 时 候 不 同类 之 间 可 以 有 一 些 共 有 的 特性 ， 这 时 候 就 可 以 把 特性 提取 成 
接口 (interfaces) ， 用 implements 关键 字 来 实现 。 这 个 特性 大 大 提高 了 面向 对 
象 的 灵活 性 。 


举例 来 说 ， 门 是 一 个 类 ， 防 资 门 是 门 的 子 类 。 如 果 防 资 门 有 一 个 报警 器 的 功能 ， 我 
们 可 以 简单 的 给 防盗 门 添加 一 个 报警 方法 。 这 时 候 如 果 有 另 一 个 类 ， 车 ， 也 有 报警 
器 的 功能 ， 就 可 以 考虑 把 报警 器 提取 出 来 ， 作 为 一 个 接口 ， 防 资 门 和 车 都 去 实现 
它 : 
interface Alarm { 
alert(); 


class Door { 


} 


class SecurityDoor extends Door implements Alarm { 
alert() { 
console.log('SecurityDoor alert'); 


class Car implements Alarm { 
alert() { 
console.log('Car alert'); 


一 个 类 可 以 实现 多 个 接口 : 


interface Alarm { 


alert(); 

} 

interface Light { 
lighton(); 
lightoff(); 


class Car implements Alarm, Light { 
alert() { 
console.log('Car alert'); 


} 
lighton() { 
console.log('Car light on'); 


} 
lightoff() { 


console.log('Car light off'); 


上 例 中 ， Car 实现 了 Alarm 和 Light 接口 ， 既 能 报警 ， 也 能 开关 车 灯 。 
接口 继承 接口 
接口 与 接口 之 间 可 以 是 继承 关系 : 


interface Alarm { 


alert(); 

} 

interface LightableAlarm extends Alarm { 
lighton(); 
lightoff(); 


上 例 中 ， 我 们 使 用 extends 使 LightableAlarm 继承 Alarm 。 
授 口 继承 类 
接口 也 可 以 继承 类 : 


class Point { 
x: number ，; 
y: number; 


interface Point3d extends Point { 
z: number ，; 


let point3d: Point3d = {X: 1, y: 2, Zz: 3}; 


之 前 学 习 过 ， 可 以 使 用 接口 的 方式 来 定义 一 个 函数 需要 符合 的 形状 : 


interface SearchFunc { 
(source: string, subString: string): boolean; 


let mySearch: SearchFunc ; 
mySearch = function(source: String，SubString: string) { 
return source.search(subString) !== -1; 


有 时 候 ， 一 个 函数 还 可 以 有 自己 的 属性 和 方法 : 


Interface Counter { 
(start: number): string; 
interval: number; 
reset(): void; 


function getCounter(): Counter { 
let counter = <Counter>function (start: number) { }; 
counter.interval = 123; 
counter.reset = function () { }; 
return counter,; 


} 

let c = getCounter(); 
Ci 二 

c.reset(); 


c.interval = 5.0; 


参考 


e Interfaces (中 文 版 ) 


泛 型 


泛 型 《Generics) 是 指 在 定义 函数 、 接 口 或 类 的 时 候 ， 不 预先 指定 具体 的 类 型 ， 而 
在 使 用 的 时 候 再 指定 类 型 的 一 种 特性 。 


简单 的 例子 


首先 ， 我 们 来 实现 一 个 函数 createArray ， 它 可 以 创建 一 个 指定 长 度 的 数组 ， 同 
时 将 每 一 项 都 卉 充 一 个 默认 值 : 


function createArray(length: number, value: any): Array<any> { 
let result = []; 
for (let i = 0; i < length; i++) { 
result[i] = value; 


} 
return result; 
} 
createArray(3, 'x'); // ['x', 'x', 'x'] 


上 例 中 ， 我 们 使 用 了 之 前提 到 过 的 数组 泛 型 来 定义 返回 值 的 类 型 。 


这 段 代码 编译 不 会 报错 ， 但 是 一 个 显而易见 的 缺陷 是 ， 它 并 没有 准确 的 定义 返回 值 
的 类 型 : 


Array<any> 允许 数组 的 每 一 项 都 为 任意 类 型 。 但 是 我 们 预期 的 是 ， 数 组 中 每 一 
项 都 应 该 是 输入 的 value 的 类 型 。 


这 时 候 ， 泛 型 就 派 上 用 场 了 : 


function createArray<T>(length: number, value: T): Array<T> { 
let result: T[] = []; 
for (let 1 = 0; i < length; i++) { 
result[i] = value; 


} 
return result; 
} 
createAnrray<string>(30 /| 


上 例 中 ， 我 们 在 函数 名 后 添加 了 <T> ， 其 中 T 用 来 指 代 任意 输入 的 类 型 ， 在 后 
面 的 输入 value: T 和 输出 Array<T> 中 即 可 使 用 了 。 


接着 在 调用 的 时 候 ， 可 以 指定 它 具 体 的 类 型 为 string 。 当 然 ， 也 可 以 不 手动 指 
定 ， 而 让 类 型 推论 自动 推算 出 来 : 


function createArray<T>(length: number, value: T): Array<T> { 
let result: T[] = []; 
for (let i = 0; i < length; i++) { 
result[i] = value; 


} 
return result; 
} 
createArray(3, 'x'); // ['x', 'x', 'x'] 


多 个 类 型 参数 
定义 泛 型 的 时 候 ， 可 以 一 次 定义 多 个 类 型 参数 : 


function swap<T, U>(tuple: [T，U]): [U, T] { 
return [tuple[1], tuple[0]]; 


swap([7, 'seven']); // ['seven', 7] 


上 例 中 ， 我 们 定义 了 一 个 swap 函数， 用 来 交换 输入 的 元 组 。 


泛 型 约束 


在 函数 内 部 使 用 泛 型 变量 的 时 候 ， 由 于 事先 不 知道 它 是 哪 种 类 型 ， 所 以 不 能 随意 的 
操作 它 的 属性 或 方法 : 


EUneceonodggangmuenttEyenE(gTINDERT 人 
console.log(arg.length); 
return arg; 


// index.ts(2,19): error TS2339: Property 'length' does not exis 
Gonmevynennmne 


上 例 中 ， 泛 型 T 不 一 定 包含 属性 length ， 所 以 编译 的 时 候 报 错 了 。 


这 时 ， 我 们 可 以 对 泛 型 进行 约束 ， 只 允许 这 个 函数 传 入 那些 包含 length 属性 的 
变 写 


量 。 这 就 是 泛 型 约束 : 


interface Lengthwise { 
length: number; 


function loggingIdentity<T extends Lengthwise>(arg: T): T 
console.log(arg.length); 
return arg; 


上 例 中 ， 我 们 使 用 了 extends 约束 了 泛 型 T 必须 符合 接口 Lengthwise 的 
形状 ， 也 就 是 必须 包含 length 属性 。 


此 时 如 果 调 用 loggingIdentity 的 时 候 ， 传 入 的 arg 不 包含 length ， 那 么 
在 编译 阶段 就 会 报错 了 : 


interface Lengthwise { 
length: number; 


function loggingIdentity<T extends Lengthwise>(arg: T): T 
console.log(arg.1length); 
return arg; 


loggingIdentity(7); 


// index.ts(10,17): error TS2345: Argument of type '7' is not as 
signable to parameter of type 'Lengthwise'. 


多 个 类 型 参数 之 间 也 可 以 互相 约束 : 


functioncopyEields<T extendsnU US(target Tsourcer UT 
for (let id in source) { 
target[id] = (<T>source)[id]; 
} 


return target, 


ee xX a D2 CS 0 4 


copyFields(x, { b: 10, d: 20 }); 


上 例 中 ， 我 们 使 用 了 两 个 类 型 参数 ， 其 中 要 求 T 继承 U ， 这 样 就 保证 了 U 上 
不 会 出 现 T 中 不 存在 的 字段 。 


S73 


之 前 学 习 过 ， 可 以 使 用 接口 的 方式 来 定义 一 个 函数 需要 符合 的 形状 : 


interface SearchFunc { 
(source: string, subString: string): boolean,; 


let mySearch: SearchFunc ; 
mySearch = function(source: string, subString: string) { 
return source.search(subString) !== -1; 


当然 也 可 以 使 用 含有 泛 型 的 接口 来 定义 函数 的 形状 : 


interface CreateArrayFunc { 
<T>(length: number, value: T): Array<T>; 


let createArray: CreateArrayFunc; 
createArray = function<T>(length: number, value: T): Array<T> { 
let result: T[] = []; 
for (let 1 = 0; i < length; i++) { 
result[i] = value; 


} 
return result; 
} 
Cieateaay (Se /| 


进一步 ， 我 们 可 以 把 泛 型 参数 提前 到 接口 名 上 : 


Interface CreateArrayFunc<T> { 
(length: number, value: T): Array<T> 


Jet createAr ray: CreateArrayFunc<any> ， 


createArray = function<T>(length: number, value: T): Array<T> { 


let result: T[] = []; 
for (let i = 0; i < length; i++) { 
result[i] = value; 
} 
return result; 
} 
cneateAmray(3 /> | 


与 泛 型 接口 类 似 ， 泛 型 也 可 以 用 于 类 的 类 型 定义 中 : 


class GenericNumber<T> { 


zeroValue: T; 


add (CXE Ty > 


let myGenericNumber = new GenericNumber<number>(); 


myGenericNumber .zeroValue = 0; 


myGenericNumber.add = function(x, y) { return x + y; }; 


泛 型 参数 的 默认 类 型 


在 TypeScript 2.3 以 后 


时 没有 在 代码 中 直接 指定 


型 就 会 起 作用 。 


a SA 
类 型 参数 ， 从 实际 值 参 数 中 也 无 法 推测 出 时 ， 这 个 默认 类 


function createArray<T = string>(length: number, value: T): Array 
<T> { 
let result: T[] = []; 
for (let i = 0; i < length; i++) { 
result[i] = value; 


} 


return result; 
Ia | 


。 Generics (中 文 版 ) 
e Generic parameter defaults 


e@ 上 一 章 : 类 与 接口 
。 下 一 洁 * 声 明 合 并 
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声明 合并 


如 果 定 义 了 两 个 相同 名 字 的 函数 、 接 口 或 类 ， 那 么 它们 会 合并 成 一 个 类 型 : 


函数 的 合并 
之 前 学 习 过 ， 我 们 可 以 使 用 重 载 定义 多 个 函数 类 型 : 


function reverse(x: number): number; 
function reversel(x "string):. string, 
funetlonmmeverselK mumbemm steno numbermnlemstenone 
if (typeof x === 'number') { 
return Number(x.toString().split('').reverse().join("')) 


} else if (typeof x === 'string') { 
return x.split('').reverse().join('"'); 


接口 的 合并 
接口 中 的 属性 在 合并 时 会 简单 的 合并 到 一 个 接口 中 : 


interface Alarm { 
price: number ; 


} 


interface Alarm { 
weight: number ; 


相当 于 : 


声 明 合 并 


Interface Alarm { 
price: number,; 
weight: number ， 


注意 ， 合 并 的 属性 的 类 型 必须 是 唯一 的 : 


Interface Alarm { 
price: number ， 

} 

interface Alarm { 
price: number; // 虽然 重复 了 ， 但 是 类 型 都 是 “number `， 所 以 不 会 报错 
weight: number ， 


Interface Alarm { 
price: number,; 

} 

interface Alarm { 
price: string; // 类 型 不 一 致 ， 会 报错 
weight: number; 


/ndex ots(5 3) errorms2403°sSubsequentrvariable declarations 
must have the same type. Variable 'price' must be of type “num 
ber', but here has type 'string'. 


接口 中 方法 的 合并 ， 与 函数 的 合并 一 样 : 
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interface Alarm { 
price: number,; 
alert(s: string): string; 


} 


interface Alarm { 
weight: number ; 
alert(s: string, n: number): string; 


相当 于 : 


interface Alarm { 
price: number,; 
weight: number ， 
alert(s: string): string; 
alert(s: string, n: number): string; 


类 的 合并 


类 的 合并 与 接口 的 合并 规则 一 致 。 


参考 


e Declaration Merging (中 文 版 ) 


e@ 上 一 章 : 泛 型 


。 下 一 章 : 扩展 阅读 


扩展 阅读 


此 处 记录 了 官方 手册 (中 文 版 ) 中 包含 ， 但 是 本 书 未 涉及 的 概念 。 


我 认为 它们 是 一 些 不 重要 或 者 不 属于 TypeScript 的 概念 ， 所 以 这 里 只 给 出 一 个 简单 
的 释义 ， 详 细 内 容 可 以 点 击 链接 深入 理解 。 


Never (中 文 版 ) :永远 不 存在 值 的 类 型 ， 一 般 用 于 错误 处 理 函 数 
Variable Declarations (中 文 版 ) :使 用 let 和 const 替代 var ， 这 是 
ES6 的 知识 

this :箭头 函数 的 运用 ， 这 是 ES6 的 知识 

Using Class Types in Generics (中 文 版 ) : 创建 工厂 函数 时 ， 需 要 引用 构造 
函数 的 类 类 型 

Best common type (中 文 版 ) : 数组 的 类 型 推论 

Contextual Type (中 文 版 ) : 函数 输入 的 类 型 推论 
Type Compatibility (中 文 版 ): 允许 不 严格 符合 类 型 ， 只 需要 在 一 定 规则 下 兼 
容 即 可 
Advanced Types (中 文 版 ) :使 用 & 将 多 种 类 型 的 共有 部 分 司 加 成 一 种 类 
型 
Type Guards and Differentiating Types (中 文 版 ) : 联合 类 型 在 一 些 情况 下 被 
识别 为 特定 的 类 型 

Discriminated Unions (中 文 版 ) :使 用 | 联合 多 个 接口 的 时 候 ， 通 过 一 个 
共有 的 属性 形成 可 辨识 联合 

Polymorphic this types (中 文 版 ) : 父 类 的 某 个 方法 返回 this ， 当 子 类 
继承 父 类 后 ， 子 类 的 实例 调用 此 方法 ， 返 回 的 this 能 够 被 TypeScript 正确 
的 识别 为 子 类 的 实例 。 

Symbols (中 文 版 ) : 新 原生 类 型 ， 这 是 ES6 的 知识 

lterators and Generators (中 文 版 ) : 迭代 器 ， 这 是 ES6 的 知识 
Namespaces (中 文 版 ) : 避免 全 局 污染 ， 现 在 已 被 ES6 Module 替代 
Decorators (中 文 版 ) : 修饰 器 ， 这 是 ES7 的 一 个 提案 

Mixins (中 文 版 ) : 一 种 编程 模式 ， 与 TypeScript 没有 直接 关系 ， 可 以 参考 
ES6 中 Mixin 模式 的 实现 


扩展 阅读 
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工程 


掌握 了 TypeScript 的 语法 就 像 学 会 了 砌 墙 的 工艺 。 


我 们 学 习 TypeScript 的 目的 不 是 为 了 造 一 间 小 茅屋 ， 而 是 为 了 造 高 楼 大 厦 ， 这 也 正 
是 TypeScript 的 类 型 系统 带 来 的 优势 。 


那么 一 项 大 工程 应 该 如 何 开展 呢 ? 本 部 分 的 内 容 就 会 介绍 TypeScript 工程 化 的 最 佳 
实践 ， 具 体内 容 包括 : 


e 代码 检查 


e@ 上 一 章 : 扩展 阅读 
e@ 下 一 章 : : 代码 检查 


代码 检查 


目前 TypeScript 的 代码 检查 主要 有 两 个 方案 : 使 用 TSLint 或 使 用 ESLint + 


typescript-eslint-parser “。 


什么 是 代码 检查 


代码 检查 主要 是 用 来 发 现代 码 错 误 、 统 一 代码 风格 。 


在 JavaScript 项 目 中 ， 我 们 一 般 使 用 ESLint 来 进行 代码 检查 。 它 通过 插件 化 的 特 
性 极 大 的 丰富 了 适用 范围 ， 搭 配 typescript-eslint-parser 之 后 ， 其 至 可 以 
用 来 检查 TypeScript 代码 。 


TSLint 与 ESLint 类 似 ， 不 过 除了 能 检查 常规 的 js 代码 风格 之 外 ，TSLint 还 能 够 通 
过 TypeScript 的 语法 解析 ， 利 用 类 型 系统 做 一 些 ESLint 做 不 到 的 检查 。 


为 什么 需要 代码 检查 


有 人 会 觉得 ，JavaScript 非常 灵活 ， 2 以 需要 代码 检查 。 而 TypeScript 已 经 能 够 在 
编译 阶段 检查 出 很 多 问题 了 ， 为 什么 还 需要 代码 检查 呢 ? 


因为 TypeScript 关注 的 重心 是 类 型 的 匹配 ， 而 不 是 代码 风格 。 当 团队 的 人 员 越 来 越 
多 时 ， 同 样 的 逻辑 不 同 的 人 写 出 来 可 能 会 有 很 大 的 区 别 : 


e ee 
否 应 该 禁用 var ? 

玫 证 丰 疝 该 I 开头 ? 

应 让 


强制 使 用 === 而 不 是 == ? 


缩 
© 是 否 
e@ 接口 
e@ 是 否 

这 些 问 题 TypeScript 不 会 关注 ， 但 是 却 影响 到 多 人 协作 开发 时 的 效率 、 代 码 的 可 理 
解 性 以 及 可 维护 性 。 


下 面 来 看 一 个 具体 的 例子 : 


代码 检查 


let myName = 'Tom'， 


console.log( My name is ${myNane}. ); 
console.log( My name is ${myName.toStrng()} ); 
console.log( My name is ${myName} ) 


/7/ ESCO 1 

YA 

AW/ index ts(3927) errormms25523 Cannotnfindmname myNane “Dad 
you mean 'myName'? 

/lindexe ts(4%34) errorns255l Property toserng doesmnmotrexy 
Ssteonme Yenmsterm Di Voumeann tostng 


A 

YY 

ZY 

// eslint 报错 信息 : 

YA 

// /path/to/index.ts 

YY 3527%erroremyNane sis motndefined no-undef 
// 5:38 error Missing semicolon semi 

ZA 

// * 2 problems (2 errors, © warnings) 

Vl 1 errors, © warnings potentially fixable with the ‘--fix ”0 
DaignE 

VA 

ZY 

YA 

// tslint 报错 信息 : 

// 


// ERROR: /path/to/index.ts[5, 36]: Missing semicolon 


tsc 是否 eslint 是 tslint 是 
的 问题 
人 报错 否 报错 否 报错 


myName 被 勿 写成 了 


myNane 


toString 被 勿 写成 了 
toStrng 


少 了 一 个 分 号 
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上 例 中 ， 由 于 eslint 和 tslint 均 无 法 识别 myName 存在 哪些 方法 ， 所 以 
对 于 拼写 错误 的 toString 没有 检查 出 来 。 


而 代码 风格 的 错误 不 影响 编译 ， 故 少 了 一 个 分 号 的 错误 tsc 没有 检查 出 来 。 


对 于 未 定义 的 变量 myNane ， tsc 可 以 检测 出 来 。 by 到 tslint 的 地 方 肯 

会 接 入 tsc 编译 ， 所 以 tslint 就 没 必要 检测 这 个 错误 了 。 eslint 需要 
能 够 独立 于 某 个 编译 环境 运行 ， 所 以 能 检测 出 此 类 错误 ， i TypeScript 代码 ， 
其 实 是 一 种 宛 余 的 检测 了 。 


上 ,不 止 tsc 与 eslint 之 间 有 宛 余 的 检测 ， tsc 与 tslint 之 间 也 
一 些 宛 余 的 检测 ， 但 是 大 部 分 都 是 因为 早期 的 tsc 还 没 能 做 到 检测 此 类 错误 。 


这 
事实 
有 一 
举 个 例子 ，TSLint 中 的 typeof-compare 要 求 typeof 表达 式 比 较 的 对 象 必须 
是 'undefined' ，'object' ，'boolean' ，'number' ，'string' ， 


'function' 或 'symbol' 之 一 。 而 TypeScript 2.2 之 后 ， 编 译 器 就 已 经 自 带 
了 这 个 功能 。 


下 图 表示 了 tsc ，eslint 和 tslint 能 覆盖 的 检查 : 








吨 筋 154 起 供 的 梭 营 





上 图 中 ，tsc ，eslint 和 tslint 之 问 互 相 都 有 重 有 全 的 部 分 ， 也 有 各 自 独立 


的 部 分 。 


虽然 发 现代 码 错误 比 统一 的 代码 风格 更 重要 ， 但 是 当 一 个 项 目 越 来 越 斋 大 ， 开 发 人 
员 也 越 来 越 多 的 时 候 ， 代 码 风 格 的 约束 还 是 必 不 可 少 的 。 


应 该 使 用 哪 种 代码 检查 工具 


TSLint 与 ESLint 作为 检查 TypeScript 代码 的 工具 ， 各 自 有 各 自 的 优点 : 
TSLint 的 优点 : 


1. 专 为 TypeScript 服务 ，bug 比 ESLint 少 

2. 不 受 限 于 ESLint 使 用 的 语法 树 ESTree 

3. 能 直接 通过 tsconfig.json 中 的 配置 编译 整个 项 目 ， 使 得 在 一 个 文件 中 的 
类 型 定义 能 够 联动 到 其 他 文件 中 的 代码 检查 


ESLint 的 优点 : 


1. 基础 规则 比 TSLint 多 很 多 (249 : 151) 
2. 社区 繁荣 ， 插 件 众多 (50+ :9) 


下 面 来 看 一 些 具体 的 例子 : 
ieee hoo Sng := 


/SITE 人 二 

Nb 

// ERROR: /path/to/index.ts[1, 19]: Operands of '+' operation mu 
st either be both strings or both numbers, consider using templa 
Eeerals 


以 上 代码 在 TSLint 中 会 报错 ， 原 因 是 加 号 两 边 必须 同 为 数字 或 同 为 字符 囊 (需要 
开局 restrict-plus-operands 规则 ) 。 


ESLint 无 法 知道 加 号 两 边 的 类 型 ， 所 以 对 这 种 规则 无 能 为 力 。 


iumnetronm toola bc eo et ne 
doSomething(); 


// eSlint 报错 信息 : 

// 

// /path/to/index.ts 

HY 1:1 error Function 'foo' has too many parameters (8). Max 
imum allowed is 7 max-params 

ZY 

// * 1 problem (1 error, © warnings) 


ESLint 可 以 检测 出 来 以 上 代码 的 函数 参数 超过 了 了 7 个 (需要 开启 max-params 规 
则 ) O 


但 是 TSLint 没有 此 项 检查 ， 虽 然 也 可 以 实现 ， 但 是 需要 自己 手动 写 一 条 规则 。 


那么 到 底 该 使 用 哪 种 代码 检测 工具 呢 ? 经 过 一 些 实践 ， 我 建议 可 以 按照 以 下 流程 决 
A 


D 

























正在 使 用 
ESLint 吗 ? 










正在 使 用 
TSLint 吗 ? 


al 





DY 






将 会 长 时 间 处 于 js 
与 ts 共存 的 状态 吗 ? 











大 


© ESLint © ESLint + BET 


由 于 一 个 项 目 中 无 法 针对 不 同 后 缀 的 文件 使 用 不 同 的 eslint 配置 


故 ts 文件 只 能 使 用 tslint 检查 ，js 文件 保持 使 用 eslint 检查 


在 TypeScript 中 使 用 ESLint 


安装 ESLint 


ESLint 可 以 安装 在 当前 项 目 中 或 全 局 环境 下 ， 因 为 代码 检查 是 项 目的 重要 组 成 部 
分 ， 所 以 我 们 一 般 会 将 它 安 装 在 当前 项 目 中 。 可 以 运行 下 面 的 脚本 来 安装 : 


npm install eslint --Save-dev 


由 于 ESLint 默认 使 用 Espree 进行 语法 解析 ， 无 法 识别 TypeScript 的 一 些 语法 ， 
故我 们 需要 安装 typescript-eslint-parser ， 替 代 掉 默认 的 解析 器 ， 别 忘 了 同 


> 壮 


时 安装 typescript 


npm install typescript typescript-eslint-parser --save-dev 


由 于 typescript-eslint-parser 对 一 部 分 ESLint 规则 支持 性 不 好 ， 故 我 们 需 
要 安装 eslint-plugin-typescript ， 弥 补 一 些 支持 性 不 好 的 规则 。 


npm install eslint-plugin-typescript --save-dev 


创建 配置 文件 


ESLint 需要 一 个 配置 文件 来 决定 对 哪些 规则 进行 检查 ， 配 置 文件 的 名 称 一 般 是 


,eslintrc.js 或 ,eslintrc.json 。 


当 运 行 ESLint 的 时 候 检 查 一 个 文件 的 时 候 ， 它 会 首先 尝试 读 取 该 文件 的 目录 下 的 
配置 文件 ， 然 后 再 一 级 一 级 往 上 查找 ， 将 所 找到 的 配置 合并 起 来 ， 作 为 当前 被 检查 
文件 的 配置 


我 们 在 项 目的 根 目 录 下 创建 一 个 .eslintrc.js ， 内 容 如 下 


module.exports = { 
parser: 'typescript-eslint-parser', 


plugins: [ 
'typescript'" 
]， 
rules: { 
otable em 
较 时 除外 
‘eqeqeq': [ 
"error', 
'always', 
{ 
null onore 
} 
]， 
// 类 和 接口 的 命名 必须 遵守 帕斯卡 命名 法 ， 比 如 PersianCat 
'typescript/class-name-casing': 'error' 
} 


以 上 配置 中 ， 我 们 指定 了 两 个 规则 ， 其 中 eqeqeq 是 ESLint 原生 的 规则 〈 它 要 求 
必须 使 用 === 或 !== ， 茶 止 使 用 == 或 != ， 与 null 比较 时 除 
外 ) ， typescript/class-name-casing 是 eslint-plugin-typescript 为 
ESLint 增加 的 规则 ( 它 要 求 类 和 接口 的 命名 必须 遵守 帕斯卡 命名 法 ， 上 比如 


Persiancat ) 。 


3 


规则 的 取 值 一 般 是 一 个 数组 (上 例 中 的 eqeqeq ) ， 其 中 第 一 项 是 
off 、warn 或 error 中 的 一 个 ， 表 示 关 闭 、 警 告 和 报错 。 后 面 的 项 都 是 该 
规则 的 其 他 配置 


果 没 有 其 他 配置 的 话 ， 则 可 以 将 规则 的 取 值 简写 为 数组 中 的 第 一 项 (上 例 中 的 


typescirpt/class-name-casing ) 。 
关闭 、 警 告 和 报错 的 含义 如 下 : 
e 关闭 : 禁用 此 规则 
@ 警告 : 代码 检查 时 输出 错误 信息 ， 但 是 不 会 影响 到 exit code 
@ 报错 : 发 现 错误 时 ， 不 仅 会 输出 错误 信息 ， 而 且 exit code 将 被 设 为 1 (一 般 
exit code 不 为 0 则 表示 执行 出 现 错 eo 


检查 一 个 ts 文件 
创建 了 配置 文件 之 后 ， 我 们 来 创建 一 个 ts 文件 看 看 是 否 能 用 ESLint 去 检查 它 了 。 


创建 一 个 新 文件 index.ts ， 将 以 下 内 容 复制 进去 


interface person { 
name: string; 
age: number,; 


let tom: person = { 
name: "Tom'， 
age: 25 

}; 


if (tom.age == 25) { 
console.log(tom.name + 'is 25 years old.'); 


./Node modules/.bin/eslint index.ts 


则 会 得 到 如 下 报错 信息 : 


/path/to/index.ts 

1:11 error Interface 'person' must be PascalCased typescri 
pt/class-name-casing 

11:13 error Expected '===' and instead Saw '==" eqeqedqd 


x 2 problems (2 errors, 0 warnings) 


上 面 的 结果 显示 ， 刚 刚 配 置 的 两 个 规则 都 生效 了 : 接口 person 必须 写成 帕斯卡 
命名 规范 ， == 必须 写成 === 。 


需要 注意 的 是 ， 我 们 使 用 的 是 ./node_modules/.bin/eslint ， 而 不 是 全 局 的 
eslint 脚本 ， 这 是 因为 代码 检查 是 项 目的 重要 组 成 部 分 ， 所 以 我 们 一 般 会 将 它 
安装 在 当前 项 目 中 。 

可 是 每 次 执行 这 么 长 一 段 脚本 颇 有 不 便 ， 我 们 可 以 通过 在 package.json 中 添加 
一 个 script 来 创建 一 个 npm script 来 简化 这 个 步骤 : 


Semlnese 
"eslint": "eslint index.ts" 


这 时 只 需 执 行 npm run eslint 即 可 。 


检查 整个 项 目的 ts 文件 


我 们 的 项 目 源 文件 一 般 是 放 在 src 目录 下 ， 所 以 需要 将 package.json 中 的 
eslint 脚本 改 为 对 一 个 目录 进行 检查 。 由 于 eslint 默认 不 会 检查 .ts 后 
级 的 文件 ， 所 以 需要 加 上 参数 --ext .ts 


SGCIETDES 有 
"eslint": "eslint src --ext .ts" 


此 时 执行 npm run eslint 即 会 检查 src 目录 下 的 所 有 .ts 后 级 的 文件 。 


在 VSCode 中 集成 ESLint 检查 
在 编辑 器 中 集成 ESLint 检查 ， 可 以 在 开发 过 程 中 就 发 现 错误 ， 极 大 的 增加 了 开发 
效率 。 


要 在 VSCode 中 集成 ESLint 检查 ， 我 们 需要 先 安装 ESLint 插件 ， 点 击 [扩展 」 按 
钮 ， 搜 索 ESLint， 然 后 安装 即 可 。 


VSCode 中 的 ESLint ee ,ts 后 组 的 ， 需 要 在 [文件 => 首选 
页 => 设置 」 中， 添加 以 下 配置 


{ 
esleimnte Vealdate :al 
"javascript", 
"javascriptreact", 
"typescr ipt” 
] 
} 


这 时 再 打开 一 个 ,ts 文件 ， 将 和 鼠标 移 到 红色 提示 处 ， 即 可 看 到 这 样 的 报错 信息 
本 


{ 


[eslint] Interface “person”must be PascalCased (typescript/cla 
ss-name-casing) 


name . 


(tom-age == 25) { 


.log(tom.name + 





使 用 AlloyTeam 的 ESLint 配置 


ESLint 原生 的 规则 和 eslint-plugin-typescript 的 规则 太 多 了 ， 而 且 原 生 的 
规则 有 一 些 在 TypeScript 中 支持 的 不 好 ， 需 要 禁用 掉 。 

这 里 我 推荐 使 用 AlloyTeam ESLint 规则 中 的 TypeScript 版 本 ， 它 已 经 为 我 们 提供 
了 一 套 完善 的 配置 规则 。 


安装 : 


npm install]l --save-dev eslint typescript typescript-eslint-parse 
r eslint-plugin-typescript eslint-config-alloy 


在 你 的 项 目 根 目录 下 创建 ,eslintrc.js ， 并 将 以 下 内 容 复 制 到 文件 中 : 


module.exports = { 


extends: [ 
'eslint-config-alloy/typescript', 
]， 
globals: { 
// 这 里 卉 入 你 的 项 目 需要 的 全 局 变量 
// 这 里 值 为 false 表示 这 个 全 局 变量 不 允许 被 重新 赋值 ， 比 如 : 
// 
// jQuery: false, 
/belalse 
}, 
rules: { 
// 这 里 填 入 你 的 项 目 需 要 的 个 性 化 配置 ， 比 如 : 
// 
// // @fixable 一 个 缩 进 必 须 用 两 个 空格 替代 
/undeme aa 
7 "error ' ， 
// 2 
7 { 
WY SwitchCase: 1, 
// flatTernaryExpressions: true 
// } 
| 
} 


下 


使 用 ESLint 检查 tsx 文件 
如 果 需 要 同时 支持 对 tsx 文件 的 检查 ， 则 需要 对 以 上 步骤 做 一 些 调整 : 
和 


女 区 eslint-plugin-react 


npm install --save-dev eslint-plugin-react 


package.json 中 的 scripts.eslint 添加 .tsx 后 级 


WSelml es. 
"eslint": "eslint src --ext .ts,.tsx" 


} 


VSCode 的 配置 中 新 增 typescriptreact 检查 


{ 

“esimnte Valndateea 
"javascript", 
"javascriptreact", 
"typescript", 
"typescriptreact" 

] 

} 


使 用 AlloyTeam ESLint 规则 中 的 TypeScript React 版 本 


AlloyTeam ESLint 规则 中 的 TypeScript React 版 本 
在 TypeScirpt 中 使 用 TSLint 
TSLint 的 使 用 比较 简单 ， 参 考官 网 的 步骤 安装 到 本 地 即 可 : 


npm install --save-dev tslint 


创建 配置 文件 tslint.json 


UDC SEE nf 
AI nn 
"triple-equals": [ 
Crnues 
"allow-null-check" 


}, 
enteroptioms ef 


"exclude": |[ 
"**/node modules/**" 


为 package.json 添加 tslint 脚本 


uselmles 
issulnmt eslnnt ee Pio ce Sm/ /ES Sn /SY 


其 中 --project . 会 要 求 tslint 使 用 当前 目录 的 tsconfig,json 配置 来 
获取 类 型 信息 ， 很 多 规则 需要 类 型 信息 才能 生效 。 


此 时 执行 npm run tslint 即 可 检查 整个 项 目 。 


在 VSCode 中 集成 TSLint 检查 


在 VSCode 中 安装 tslint 插件 即 可 ， 安 装 好 之 后 ， 默 认 是 开局 的 状态 。 


使 用 AlloyTeam 的 TSLint 配置 


AlloyTeam 为 TSLint 也 打造 了 一 套 配 置 tslint-config-alloy 


npm install]l --save-dev tslint-config-alloy 


安装 之 后 修改 tsconfig.json 即 可 


{ 
"extends": "tslint-config-alloy", 
"rules :nf 
i | 
Ue 
}, 
enteroptioms 大 
"exclude": [ 
Ooeamocuiliesye si 
] 
} 
} 


使 用 TSLint 检查 tsx 文件 


TSLint 默认 支持 对 tsx 文件 的 检查 ， 不 需要 做 额外 配置 。 


Troubleshootings 


Cannot find module typescript-eslint-parser 


你 运行 的 是 全 局 的 eslint， 需 要 改 为 运行 ,/node modules/.bin/eslint 。 


cannot read property type of null 


需要 关闭 eslint-plugin-react 中 的 规则 react/jsx-indent 。 


如 果 仍 然 报错 ， 多 半 是 因为 某 
1 


规则 需要 被 关闭 ， 可 以 使 用 [二 分 排 错 法 1 检查 是 
哪个 规则 造成 了 错误 。 也 欢迎 给 es 


此 
给 eslint-config-alloy 提 issue 。 


VSCode 没有 显示 出 ESLint 的 报错 


检查 [文件 => 首选 项 => 设置 」 中 有 没有 配置 正确 
检查 必要 的 npm 包 有 没有 安装 

. 检查 .eslintrc.js 有 没有 配置 

检查 文件 是 不 是 在 ,eslintignore 中 


ND- 


如 果 以 上 步骤 都 不 奏效 ， 则 可 以 在 「 文 件 => 首选 项 => 设置 上 」 中 配置 
"eslint.trace.server": "messages" ， 按 Ctrl + Shift + U 打开 输出 面 
板 ， 然 后 选择 ESLint 输出 ， 查 看 具体 错误 。 


输出 ESLint 


Sz 
[Info - 7:46:24 PM] ESLint servecE nd 任务 
搜索 


扩展 


Git 
TypeSscript | 
| ESLint | 





为 什么 ESLint 无 法 检查 出 使 用 了 未 定义 的 变量 ( no- 
undef 规则 为 什么 被 关闭 了 ) ? 


因为 typescript-eslint-parser 无 法 支持 no-undef 规则 。 它 针对 正确 的 接 
口 定 义 会 报错 。 


所 以 我 们 一 般 会 关闭 no-undef 规则 。 
为 什么 有 些 定义 了 的 变量 (比如 使 用 enum 定义 的 变 
量 ) 未 使 用 ，ESLint 却 没有 报错 ? 


因为 无 法 支持 这 种 变量 定义 的 检查 。 建 议 在 tsconfig.json 中 添加 以 下 配置 
使 tsc 编译 过 程 能 够 检查 出 定义 了 未 使 用 的 变量 : 


"compilerOptions": { 
"noUnusedLocals": true, 
"noUnusedParameters": true 


启用 了 noUnusedParameters 之 后 ， 只 使 用 了 第 二 个 
参数 ， 但 是 又 必须 传 入 第 一 个 参数 ， 这 就 会 报错 了 


第 一 个 参数 以 下 划 线 开头 即 可 ， 参 考 


https://github.com/Microsoft/TypeScript/issues/9458 


为 什么 有 的 错误 TSLint 可 以 检查 出 来 ，vsScode 里 的 
TSLint 却 检查 不 出 来 ? 


因为 TSLint 依赖 tsconfig.json 获得 了 类 型 信息 ， 而 Vscode 里 的 TSLint 暂 不 
支持 获取 类 型 信息 ， 所 以 no-unused-variable 就 失效 了 。 


不 仅 no-unused-variables 失效 了 ，TSLint rules 里 面 所 有 标 有 Requires 
Type Info 的 规则 都 失效 了 。 


e。 感谢 创造 和 维护 TypeScript 的 人 们 ， 给 我 们 带 来 了 如 此 优秀 的 工具 

。 感谢 @zhongsp 对 官方 手册 的 翻译 ， 本 书 参考 了 大 量 他 的 翻译 ， 能 一 直 坚 持 跟 
进 非常 不 容易 

。 感谢 @ 阮 一 峰 老师 的 ECMAScript 6 入 门 ， 本 书 引 用 了 多 处 ES6 的 知识 


最 后 ， 感 谢 你 阅读 完 本 书 ， 和 硕 望 你 会 有 所 收获 。 
下 一 步 

e 在 GitHub 上 关注 本 书 

e@ 阅读 官方 手册 (中文 版 ) 巩固 知识 


。 阅读 Project Configuration (中 文 版 ) 学 习 如 何 配 置 TypeScirpt 工程 
查看 官方 示例 ， 学 习 申 实 项 目 


@ 上 一 章 代码 检查 


